Switch
이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
import { useState } from "react";
import { Switch } from "seed-design/ui/switch";
export default function SwitchPreview() {
const [isChecked, setIsChecked] = useState(false);
return <Switch checked={isChecked} onCheckedChange={setIsChecked} />;
}Installation
npx @seed-design/cli@latest add switchProps
| Prop | Type | Default |
|---|---|---|
inputProps? | InputHTMLAttributes<HTMLInputElement> | - |
rootRef? | Ref<HTMLLabelElement> | - |
label? | ReactNode | - |
size? | "16" | "24" | "32" | SwitchVariantDeprecatedSizeProps | - |
disabled? | boolean | - |
invalid? | boolean | - |
required? | boolean | - |
checked? | boolean | - |
defaultChecked? | boolean | - |
onCheckedChange? | ((checked: boolean) => void) | - |
asChild? | boolean | false |
Examples
Size
32
Deprecated Props
size="medium"은 더 이상 사용되지 않습니다. 대신 size="32"를 사용하세요.
import { useState } from "react";
import { Switch } from "seed-design/ui/switch";
export default function Switch32() {
const [isChecked, setIsChecked] = useState(false);
return <Switch size="32" label="라벨" checked={isChecked} onCheckedChange={setIsChecked} />;
}24
import { useState } from "react";
import { Switch } from "seed-design/ui/switch";
export default function Switch24() {
const [isChecked, setIsChecked] = useState(false);
return <Switch size="24" label="라벨" checked={isChecked} onCheckedChange={setIsChecked} />;
}16
Deprecated Props
size="small"은 더 이상 사용되지 않습니다. 대신 size="16"을 사용하세요.
import { useState } from "react";
import { Switch } from "seed-design/ui/switch";
export default function Switch16() {
const [isChecked, setIsChecked] = useState(false);
return <Switch size="16" label="라벨" checked={isChecked} onCheckedChange={setIsChecked} />;
}Disabled
import { VStack } from "@seed-design/react";
import { Switch } from "seed-design/ui/switch";
export default function SwitchDisabled() {
return (
<VStack gap="spacingY.componentDefault">
<Switch disabled label="라벨" />
<Switch checked disabled label="라벨" />
</VStack>
);
}Last updated on