Toggle API

A headless toggle button with dual-mode support: standalone boolean binding or group selection with single and multi-select.

Explore these related pages for additional context and usage patterns.

Page	Category
Toggle	Actions
createSingle	Selection
createGroup	Selection
Checkbox	Forms
Button	Actions

Toggle.Root

Props

id

any

Unique identifier (auto-generated if not provided)

Default: useId()

value

V | undefined

Selection key when inside a Toggle.Group

disabled

boolean | undefined

Disables this toggle

Default: false

namespace

string | undefined

Namespace for context provision to children (Indicator)

Default: "v0:toggle:root"

groupNamespace

string | undefined

Namespace for connecting to parent Toggle.Group

Default: "v0:toggle:group"

modelValue

boolean | undefined

Events

update:model-value

[value: boolean]

Slots

default

ToggleRootSlotProps

Toggle.Group

Props

namespace

string | undefined

Namespace for dependency injection

Default: "v0:toggle:group"

disabled

boolean | undefined

Disables the entire toggle group

Default: false

multiple

boolean | undefined

Allow multiple toggles active at once

Default: false

mandatory

boolean | "force" | undefined

Prevent deselecting the last active toggle

Default: false

orientation

ToggleOrientation | undefined

Layout direction for ARIA

Default: "horizontal"

modelValue

T | T[] | undefined

Events

update:model-value

[value: T | T[]]

Slots

default

ToggleGroupSlotProps

Toggle.Indicator

Props

namespace

string | undefined

Namespace for context injection from parent Toggle.Root

Default: "v0:toggle:root"

Slots

default

ToggleIndicatorSlotProps