Reference
Switch
Switch, dressed in the paper-and-ink system: a track that rests in the inset shade of the paper and fills flat with primary ink when on, the thumb sliding on the spring. The parts — Root, Label, Control, Thumb, HiddenInput.
Root · Label · Control · Thumb
#Control
A styled part — no props of its own; it takes the anatomy's shared styling.
#HiddenInput
A styled part — no props of its own; it takes the anatomy's shared styling.
#Label
A styled part — no props of its own; it takes the anatomy's shared styling.
#Root
| Prop | Type | Default | Description |
|---|---|---|---|
size | String as PropType<"sm" | "md" | "lg"> | "md" | One rung for the thumb; the track travels with it. |
checked | boolean | The controlled checked state of the switch | |
defaultChecked | boolean | The initial checked state of the switch when rendered. Use when you don't need to control the checked state of the switch. | |
disabled | boolean | Whether the switch is disabled. | |
form | string | The id of the form that the switch belongs to | |
id | string | The unique identifier of the machine. | |
ids | Partial<{ root: string; hiddenInput: string; control: string; label: string; thumb: string; }> | The ids of the elements in the switch. Useful for composition. | |
invalid | boolean | If true, the switch is marked as invalid. | |
label | string | Specifies the localized strings that identifies the accessibility elements and their states | |
name | string | The name of the input field in a switch (Useful for form submission). | |
readOnly | boolean | Whether the switch is read-only | |
required | boolean | If true, the switch input is marked as required, | |
value | string | "on" | The value of checkbox input. Useful for form submission. |
| Event | Payload |
|---|---|
checkedChange | details: CheckedChangeDetails |
update:checked | checked: boolean |
#Thumb
A styled part — no props of its own; it takes the anatomy's shared styling.