Radix Vue

Appearance

Checkbox ​

A control that allows the user to toggle between checked and not checked.

Features ​

  • Supports indeterminate state.
  • Full keyboard navigation.
  • Can be controlled or uncontrolled.

Installation ​

Install the component from your command line.

bash
npm install radix-vue

Anatomy ​

Import all parts and piece them together.

vue
<script setup>
import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'
</script>

<template>
  <CheckboxRoot>
    <CheckboxIndicator />
  </CheckboxRoot>
</template>

API Reference ​

Root ​

Contains all the parts of a checkbox. An input will also render when used within a form to ensure events propagate correctly.

PropTypeDefault
as
string | Component
div
asChild
boolean
false
defaultChecked
boolean
checked
boolean
disabled
boolean
required
boolean
name
string
value
string
on
EmitType
@update:checked
(value: boolean) => void
Data AttributeValue
[data-state]"checked" | "unchecked" | "indeterminate"
[data-disabled]Present when disabled

Indicator ​

Renders when the checkbox is in a checked or indeterminate state. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

PropTypeDefault
as
string | Component
span
asChild
boolean
false
forceMount
boolean
Data AttributeValue
[data-state]"checked" | "unchecked" | "indeterminate"
[data-disabled]Present when disabled

Examples ​

Indeterminate ​

You can set the checkbox to indeterminate by taking control of its state.

vue
<script setup>
import { Icon } from '@iconify/vue'
import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'

const checked = ref('indeterminate')
</script>

<template>
  <StyledCheckbox v-model:checked="checked">
    <Icon icon="radix-icons:checkbox-indicator">
      <Icon v-if="checked === 'indeterminate'" icon="radix-icons:divider-horizontal" />
      <Icon v-if="checked" icon="radix-icons:check" />
    </Icon>
  </StyledCheckbox>

  <button type="button" @click="() => (checked === 'indeterminate' ? (checked = false) : (checked = 'indeterminate'))">
    Toggle indeterminate
  </button>
</template>

Accessibility ​

Adheres to the tri-state Checkbox WAI-ARIA design pattern.

Keyboard Interactions ​

KeyDescription
Space
Checks/unchecks the checkbox