Checkbox

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

Accept terms and conditions.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'
import { Icon } from '@iconify/vue'

const checkboxOne = ref(true)
</script>

<template>
  <div class="flex flex-col gap-2.5">
    <label class="flex flex-row gap-4 items-center [&>.checkbox]:hover:bg-neutral-100">
      <CheckboxRoot
        v-model="checkboxOne"
        class="shadow-blackA7 hover:bg-green3 flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-[4px] bg-white shadow-[0_2px_10px] outline-none focus-within:shadow-[0_0_0_2px_black]"
      >
        <CheckboxIndicator class="bg-white h-full w-full rounded flex items-center justify-center">
          <Icon icon="radix-icons:check" class="h-3.5 w-3.5 text-grass11" />
        </CheckboxIndicator>
      </CheckboxRoot>
      <span class="select-none text-white">Accept terms and conditions.</span>
    </label>
  </div>
</template>

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.

Prop	Type	Default
`asChild`	`boolean`	`false`
`defaultChecked`	`boolean`
`checked`	`boolean`
`disabled`	`boolean`
`required`	`boolean`
`name`	`string`
`value`	`string`	`on`

Emit	Type
`@update:checked`	`(value: boolean) => void`

Data Attribute	Value
`[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.

Prop	Type	Default
`asChild`	`boolean`	`false`

Data Attribute	Value
`[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

Key	Description
`Space`	Checks/unchecks the checkbox

Checkbox ​

Features ​

Installation ​

Anatomy ​

API Reference ​

Root ​

Indicator ​

Examples ​

Indeterminate ​

Accessibility ​

Keyboard Interactions ​