Checkbox Group

Select any combination of independent options in one labeled group.

Usage

Release channels

Choose one or more independent release channels.

<!-- Checkbox Group / Release Channels -->
<script setup lang="ts">
import { CheckboxGroupRoot, CheckboxGroupItem, CheckboxGroupIndicator } from '@sectile/vue/checkbox-group'
const items = [
  { value: 'core', label: 'Core' },
  { value: 'dom', label: 'DOM' },
  { value: 'vue', label: 'Vue' },
]

</script>

<template>
  <CheckboxGroupRoot :items="items.map(item => item.value)" :default-value="['dom']" name="packages">
    <CheckboxGroupItem v-for="item in items" :key="item.value" :value="item.value">
      <CheckboxGroupIndicator>✓</CheckboxGroupIndicator>
      {{ item.label }}
    </CheckboxGroupItem>
  </CheckboxGroupRoot>
</template>

Disabled choice

Keep one choice visible but unavailable while other choices remain interactive.

<!-- Checkbox Group / Disabled Choice -->
<script setup lang="ts">
import { CheckboxGroupRoot, CheckboxGroupItem, CheckboxGroupIndicator } from '@sectile/vue/checkbox-group'
const items = [
  { value: 'core', label: 'Core' },
  { value: 'dom', label: 'DOM' },
  { value: 'vue', label: 'Vue' },
]

</script>

<template>
  <CheckboxGroupRoot :items="items.map(item => item.value)" :default-value="['dom']" name="packages">
    <CheckboxGroupItem v-for="item in items" :key="item.value" :value="item.value">
      <CheckboxGroupIndicator>✓</CheckboxGroupIndicator>
      {{ item.label }}
    </CheckboxGroupItem>
  </CheckboxGroupRoot>
</template>

Controlled

Let the parent own the current value and apply accepted changes back to the component.

<!-- Checkbox Group / Controlled -->
<script setup lang="ts">
import { CheckboxGroupRoot, CheckboxGroupItem, CheckboxGroupIndicator } from '@sectile/vue/checkbox-group'
const items = [
  { value: 'core', label: 'Core' },
  { value: 'dom', label: 'DOM' },
  { value: 'vue', label: 'Vue' },
]

</script>

<template>
  <CheckboxGroupRoot :items="items.map(item => item.value)" :default-value="['dom']" name="packages">
    <CheckboxGroupItem v-for="item in items" :key="item.value" :value="item.value">
      <CheckboxGroupIndicator>✓</CheckboxGroupIndicator>
      {{ item.label }}
    </CheckboxGroupItem>
  </CheckboxGroupRoot>
</template>

API

Vue package: @sectile/vue/checkbox-group

Components

CheckboxGroupRoot
CheckboxGroupItem
CheckboxGroupIndicator

Props

`CheckboxGroupRootProps`

as: TypePrimitiveAsDefault'div'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.
defaultValue: Typereadonly string[]Default[]
Initial value used when the component owns its state.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
form: TypestringDefaultundefined
ID of the native form associated with the control.
items: Typereadonly string[]DefaultRequired
Ordered item values managed by the component.
label: TypestringDefaultundefined
Accessible name announced for the control.
modelValue: Typereadonly string[]Defaultundefined
Current value when state is controlled by the parent.
name: TypestringDefaultundefined
Name used for native form submission.
readonly: TypebooleanDefaultfalse
Whether the value can be inspected but not changed.
required: TypebooleanDefaultfalse
Whether the control must contain a valid value before submission.

`CheckboxGroupItemProps`

as: TypePrimitiveAsDefault'button'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
required: TypebooleanDefaultundefined
Whether the control must contain a valid value before submission.
value: TypestringDefaultRequired
Current value exposed by this contract.

Slots

`CheckboxGroupRootSlotProps`

disabled: Typeboolean
Whether interaction is unavailable.
readonly: Typeboolean
Whether the value can be inspected but not changed.
value: Typereadonly string[]
Current value exposed by this contract.

Events

`CheckboxGroupRoot`

update:modelValue: Payloadreadonly string[]
Emitted when the component requests a new controlled value.

Other types

`CheckboxGroupValueChangeHandler`

type CheckboxGroupValueChangeHandler = (value: readonly string[]) => void

Parts

Shared scope: [data-scope="checkbox-group"]. Combine it with a part selector to keep styles local to this component.

Part	Selector	Role	Extra attributes
`root`	`[data-part="root"]`	Defines the component boundary and owns its composed parts.	—
`item`	`[data-part="item"]`	Represents one selectable or actionable item.	—
`indicator`	`[data-part="indicator"]`	Shows state or position without replacing the primary content.	—

Keyboard interaction

Key	Behavior
`Tab`	Move focus into and out of the group.
`Space`	Toggle the focused checkbox item.

Accessibility

The labeled group preserves each item as an independently focusable checkbox with checked and disabled state.

See the corresponding WAI-ARIA pattern for the host accessibility contract.

Checkbox Group ​

Usage ​

Release channels ​

Disabled choice ​

Controlled ​

API ​

Props ​

CheckboxGroupRootProps ​

CheckboxGroupItemProps ​

Slots ​

CheckboxGroupRootSlotProps ​

Events ​

CheckboxGroupRoot ​

Other types ​

CheckboxGroupValueChangeHandler ​

Parts ​

Keyboard interaction ​

Accessibility ​