Skip to main content
Vuetify0 is now a release candidate!
Vuetify0 Logo
Theme
Mode
Palettes
Accessibility
Vuetify One
Sign in to Vuetify One

Access premium tools across the Vuetify ecosystem — Bin, Play, Studio, and more.

Not a subscriber? See what's included

Checkbox API

A checkbox for boolean state or multi-selection groups with tri-state support.

Explore these related pages for additional context and usage patterns.

PageCategory
CheckboxForms
createGroupSelection
GroupProviders

Checkbox.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 checkbox (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 checkbox

Default: false

indeterminate

MaybeRefOrGetter<boolean> | undefined

Sets the indeterminate state

Default: false

namespace

string | undefined

Namespace for context provision to children (Indicator, HiddenInput)

Default: "v0:checkbox:root"

groupNamespace

string | undefined

Namespace for connecting to parent Checkbox.Group

Default: "v0:checkbox:group"

ariaLabelledby

string | undefined

ID of element that labels this checkbox

ariaDescribedby

string | undefined

ID of element that describes this checkbox

ariaInvalid

boolean | undefined

Whether the checkbox has an invalid value

modelValue

boolean | undefined

Events

update:model-value

[value: boolean]

Slots

default

CheckboxRootSlotProps<V>

Checkbox.Group

Props

namespace

string | undefined

Namespace for dependency injection

Default: "v0:checkbox:group"

disabled

boolean | undefined

Disables the entire checkbox group

Default: false

enroll

boolean | undefined

Auto-select non-disabled items on registration

Default: false

mandatory

boolean | "force" | undefined

Controls mandatory checkbox behavior: - false (default): No mandatory enforcement - true: Prevents deselecting the last selected item - force: Automatically selects the first non-disabled item on registration

Default: false

label

string | undefined

Accessible name for the group

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

CheckboxGroupSlotProps

Checkbox.HiddenInput

Props

namespace

string | undefined

Namespace for context injection from parent Checkbox.Root

Default: "v0:checkbox:root"

name

string | undefined

Form field name (defaults to context value)

value

string | undefined

Submitted value when checked (defaults to context value or 'on')

form

string | undefined

Associate with form by ID (defaults to context value)

Checkbox.Indicator

Props

namespace

string | undefined

Namespace for context injection from parent Checkbox.Root

Default: "v0:checkbox:root"

Slots

default

CheckboxIndicatorSlotProps

Checkbox.SelectAll

Props

label

string | undefined

Optional display label (passed through to slot and aria-label)

disabled

boolean | undefined

Disables this checkbox

namespace

string | undefined

Namespace for context provision to children (Indicator)

Default: "v0:checkbox:root"

groupNamespace

string | undefined

Namespace for connecting to parent Checkbox.Group

Default: "v0:checkbox:group"

ariaLabelledby

string | undefined

ID of element that labels this checkbox

ariaDescribedby

string | undefined

ID of element that describes this checkbox

Slots

default

CheckboxSelectAllSlotProps
Was this page helpful?

Ctrl+/