Checkbox
Toggle one optional value or represent a partially selected parent.
Usage
Binary
Represent one optional value with ordinary checked and unchecked states.
Represent one optional value with ordinary checked and unchecked states.
<!-- Checkbox / Binary -->
<script setup lang="ts">
import { ref } from 'vue'
import { CheckboxIndicator, CheckboxRoot } from '@sectile/vue/checkbox'
const checked = ref<boolean | 'indeterminate'>(false)
</script>
<template>
<CheckboxRoot v-model="checked" v-slot="{ isIndeterminate }">
<CheckboxIndicator>{{ isIndeterminate ? '−' : '✓' }}</CheckboxIndicator>
<span>Include analytics</span>
</CheckboxRoot>
</template>Mixed
Represent a parent whose child values are only partly selected.
Represent a parent whose child values are only partly selected.
<!-- Checkbox / Mixed -->
<script setup lang="ts">
import { ref } from 'vue'
import { CheckboxIndicator, CheckboxRoot } from '@sectile/vue/checkbox'
const checked = ref<boolean | 'indeterminate'>('indeterminate')
</script>
<template>
<CheckboxRoot v-model="checked" v-slot="{ isIndeterminate }">
<CheckboxIndicator>{{ isIndeterminate ? '−' : '✓' }}</CheckboxIndicator>
<span>Include analytics</span>
</CheckboxRoot>
</template>Controlled
Let the parent own the current value and apply accepted changes back to the component.
Let the parent own the current value and apply accepted changes back to the component.
<!-- Checkbox / Controlled -->
<script setup lang="ts">
import { ref } from 'vue'
import { CheckboxIndicator, CheckboxRoot } from '@sectile/vue/checkbox'
const checked = ref<boolean | 'indeterminate'>(false)
</script>
<template>
<CheckboxRoot v-model="checked" v-slot="{ isIndeterminate }">
<CheckboxIndicator>{{ isIndeterminate ? '−' : '✓' }}</CheckboxIndicator>
<span>Include analytics</span>
</CheckboxRoot>
</template>API
Vue package: @sectile/vue/checkbox
CheckboxRootCheckboxIndicator
Props
CheckboxRootProps
asElement or component rendered for this part.
asChildWhether to merge this part into its single child instead of rendering a wrapper.
defaultValueInitial value used when the component owns its state.
disabledWhether interaction is unavailable.
formID of the native form associated with the control.
modelValueCurrent value when state is controlled by the parent.
nameName used for native form submission.
readonlyWhether the value can be inspected but not changed.
requiredWhether the control must contain a valid value before submission.
valueCurrent value exposed by this contract.
CheckboxIndicatorProps
asElement or component rendered for this part.
asChildWhether to merge this part into its single child instead of rendering a wrapper.
Slots
CheckboxSlotProps
checkedWhether the control is checked.
disabledWhether interaction is unavailable.
isCheckedWhether this checkbox value is selected.
isIndeterminateWhether only part of a grouped value is selected.
readonlyWhether the value can be inspected but not changed.
Events
CheckboxRoot
update:modelValueEmitted when the component requests a new controlled value.
Other types
CheckboxValue
type CheckboxValue = boolean | 'indeterminate'CheckboxValueChangeHandler
type CheckboxValueChangeHandler = (value: CheckboxValue) => voidParts
Shared scope: [data-scope="checkbox"]. 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. | — |
indicator | [data-part="indicator"] | Shows state or position without replacing the primary content. | — |
Keyboard interaction
| Key | Behavior |
|---|---|
| Space | Toggle the current value. |
| Tab | Move through the normal document focus order. |
Accessibility
The root exposes checkbox semantics, including the mixed value through aria-checked="mixed".
See the corresponding WAI-ARIA pattern for the host accessibility contract.