Checkbox

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

Accept terms and conditions.

<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:checked="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.

$ npm add radix-vue

Anatomy

Import all parts and piece them together.

<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	Default	Type
as	'button'	AsTag | Component The element or component this component should render as. Can be overwrite by asChild
asChild		boolean Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
checked		boolean | 'indeterminate' The controlled checked state of the checkbox. Can be binded with v-model.
defaultChecked		boolean The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
disabled		boolean When true, prevents the user from interacting with the checkbox
id		string Id of the element
name		string The name of the checkbox. Submitted with its owning form as part of a name/value pair.
required		boolean When true, indicates that the user must check the checkbox before the owning form can be submitted.
value	'on'	string The value given as data when submitted with a name.

Emit	Payload
update:checked	[value: boolean] Event handler called when the checked state of the checkbox changes.

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	Default	Type
as	'span'	AsTag | Component The element or component this component should render as. Can be overwrite by asChild
asChild		boolean Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
forceMount		boolean Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.

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.

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

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

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

  <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