Checkbox
<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 | 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 | |
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 | |
value | 'on' | string The value given as data when submitted with a |
Emit | Payload |
---|---|
update:checked | [value: boolean] Event handler called when the checked state of the checkbox changes. |
Slots (default) | Payload |
---|---|
checked | false | true | 'indeterminate' Current checked state |
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 | 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 |