Checkbox

Allow users to mark options as checked, unchecked, or indeterminate, accommodating versatile states.

	<script lang="ts">
  import * as Checkbox from "@/components//ui/checkbox";
  import * as Label from "@/components//ui/label";
  let checked = false;
</script>
 
<div class="flex items-center space-x-2">
  <Checkbox.Root
    id="terms"
    bind:checked
    aria-labelledby="terms-label"
  />
  <Label.Root
    id="terms-label"
    for="terms"
    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
  >
    Accept terms and conditions
  </Label.Root>
</div>

	<script lang="ts">
  import * as Checkbox from "@/components//ui/checkbox";
  import * as Label from "@/components//ui/label";
  let checked = false;
</script>
 
<div class="flex items-center space-x-2">
  <Checkbox.Root
    id="terms"
    bind:checked
    aria-labelledby="terms-label"
  />
  <Label.Root
    id="terms-label"
    for="terms"
    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
  >
    Accept terms and conditions
  </Label.Root>
</div>

Accept terms and conditions

Structure

	<script lang="ts">
  import { Checkbox } from "bits-ui";
</script>
 
<Checkbox.Root>
  <Checkbox.Indicator />
  <Checkbox.Input />
</Checkbox.Root>

	<script lang="ts">
  import { Checkbox } from "bits-ui";
</script>
 
<Checkbox.Root>
  <Checkbox.Indicator />
  <Checkbox.Input />
</Checkbox.Root>

Controlled Usage

If you want to control or be aware of the checked state of the checkbox from outside of the component, you can bind to the checked prop.

	<script lang="ts">
  import { Checkbox } from "bits-ui";
  let myChecked = false;
</script>
 
<p>Checked: {myChecked}</p>
<Checkbox.Root bind:checked={myChecked}>
  <Checkbox.Indicator />
  <Checkbox.Input />
</Checkbox.Root>

	<script lang="ts">
  import { Checkbox } from "bits-ui";
  let myChecked = false;
</script>
 
<p>Checked: {myChecked}</p>
<Checkbox.Root bind:checked={myChecked}>
  <Checkbox.Indicator />
  <Checkbox.Input />
</Checkbox.Root>

Component API

Checkbox.Root

The button component used to toggle the state of the checkbox.

Property	Type	Description
`disabled`	`boolean`	Whether or not the checkbox button is disabled. This prevents the user from interacting with it. `Default: false`
`checked`	`boolean \| 'indeterminate'`	The checkbox button's checked state. This can be a boolean or the string 'indeterminate', which would typically display a dash in the checkbox. `Default: false`
`onCheckedChange`	`(checked: boolean \| 'indeterminate') => void`	A callback that is fired when the checkbox button's checked state changes. `Default: —— undefined`

Data Attribute	Description/Value
`data-disabled`	Present when the checkbox is disabled. `Value: ''`
`data-state`	The checkbox's state. Can be 'checked', 'unchecked', or 'indeterminate'. `Value: 'checked' \| 'unchecked' \| 'indeterminate'`

Checkbox.Input

The hidden input element that is used to store the checkbox's state for form submission. It receives all the same props as a regular HTML input element.

Property	Type	Description
`value`	`boolean`	Unless a value is provided, the input's value will be a boolean that represents the checkbox's checked state. Indeterminate checkboxes will have a value of `false`. `Default: false`
`disabled`	`boolean`	Whether or not the checkbox input is disabled. If not provided, it will inherit the disabled state of the Root component, which defaults to false. `Default: false`

Checkbox.Indicator

A component which passes `isChecked` and `isIndeterminate` slot props to its children. This is useful for rendering the checkbox's indicator icon depending on its state.

🚧 UNDER CONSTRUCTION 🚧