Switch
Switch는 사용자가 설정을 on/off로 전환할 수 있게 돕는 토글 컴포넌트입니다.Property
Size
Switch의 크기를 설정합니다.
Checked
Switch의 체크 상태를 설정합니다.
Disabled
Switch의 비활성화 상태를 설정합니다.
Read Only
사용자는 스위치 상태를 변경할 수 없지만, 현재 상태를 확인할 수 있도록 허용하는 상태입니다.
Examples
Controlled
제어되는 Switch 컴포넌트의 사용 예시입니다.
Custom Thumb
children으로 Switch.ThumbPrimitive를 전달하면 내부 파트를 직접 제어할 수 있습니다. 아이콘을 삽입하거나 다른 요소로 교체할 수 있습니다.
Props Table
Switch.Root
Switch that turns a single setting on or off. Renders a <span> element and a hidden <input> beside it.
| Prop | Default | Type |
|---|---|---|
invalid? | false | boolean |
size? | md | smmdlg |
checked? | - | boolean |
defaultChecked? | false | boolean |
onCheckedChange? | - | function |
value? | - | string |
children? | - | ReactNode |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
disabled? | false | boolean |
form? | - | string |
id? | - | string |
inputRef? | - | React.Ref<HTMLInputElement> |
name? | - | string |
nativeButton? | false | boolean |
readOnly? | false | boolean |
required? | false | boolean |
uncheckedValue? | - | string |
render? | - | ReactElementfunction |
Switch.ThumbPrimitive
Round knob inside the switch that slides to the end of the track while the switch is on. Renders a <span> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |