Switch API

A switch for on/off state or multi-selection groups with tri-state support.

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