Switch API

API reference for the Switch components.

Explore these related pages for additional context and usage patterns.

Page	Category
Switch	Forms
createGroup	Selection
Group	Providers

Switch.Root

Props

id

any

Unique identifier (auto-generated if not provided)

Default: useId()

label

string | undefined

Optional display label (passed through to slot)

value

V | undefined

Value associated with this switch (used in group mode and form submission)

name

string | undefined

Form field name - triggers auto hidden input when provided

form

string | undefined

Associate with form by ID

disabled

MaybeRefOrGetter<boolean> | undefined

Disables this switch

Default: false

indeterminate

MaybeRefOrGetter<boolean> | undefined

Sets the indeterminate state

Default: false

namespace

string | undefined

Namespace for context provision to children (Track, Thumb, HiddenInput)

Default: "v0:switch:root"

groupNamespace

string | undefined

Namespace for connecting to parent Switch.Group

Default: "v0:switch:group"

ariaLabelledby

string | undefined

ID of element that labels this switch

ariaDescribedby

string | undefined

ID of element that describes this switch

ariaInvalid

boolean | undefined

Whether the switch has an invalid value

modelValue

boolean | undefined

Events

update:model-value

[value: boolean]

Slots

default

SwitchRootSlotProps<V>

Switch.Group

Props

namespace

string | undefined

Namespace for context provision to children

Default: "v0:switch:group"

disabled

boolean | undefined

Disables all switches in the group

Default: false

enroll

boolean | undefined

Auto-select items on registration

Default: false

mandatory

boolean | "force" | undefined

Require at least one switch to be on. `'force'` prevents deselecting the last item

Default: false

label

string | undefined

Accessible group label

ariaLabelledby

string | undefined

ID of element that labels this group

ariaDescribedby

string | undefined

ID of element that describes this group

modelValue

T | T[] | undefined

Events

update:model-value

[value: T | T[]]

Slots

default

SwitchGroupSlotProps

Switch.HiddenInput

Props

namespace

string | undefined

Namespace for connecting to parent Switch.Root

Default: "v0:switch:root"

name

string | undefined

Form field name (overrides Root's name)

value

string | undefined

Form field value (overrides Root's value, defaults to 'on')

form

string | undefined

Associate with form by ID (overrides Root's form)

Switch.SelectAll

Props

label

string | undefined

Accessible label for the select-all toggle

disabled

boolean | undefined

Disables this toggle

namespace

string | undefined

Namespace for context provision to children (Track, Thumb)

Default: "v0:switch:root"

groupNamespace

string | undefined

Namespace for connecting to parent Switch.Group

Default: "v0:switch:group"

ariaLabelledby

string | undefined

ID of element that labels this toggle

ariaDescribedby

string | undefined

ID of element that describes this toggle

Slots

default

SwitchSelectAllSlotProps

Switch.Thumb

Props

namespace

string | undefined

Namespace for connecting to parent Switch.Root

Default: "v0:switch:root"

Slots

default

SwitchThumbSlotProps

Switch.Track

Props

namespace

string | undefined

Namespace for connecting to parent Switch.Root

Default: "v0:switch:root"

Slots

default

SwitchTrackSlotProps