Checkbox

Allow users to switch between checked, unchecked, and indeterminate states.

	<script lang="ts">
  import { Checkbox, Label } from "bits-ui";
  import { Check, Minus } from "$icons/index.js";
</script>
 
<div class="flex items-center space-x-3">
  <Checkbox.Root
    id="terms"
    aria-labelledby="terms-label"
    class="peer inline-flex size-[25px] items-center justify-center rounded-md border border-muted bg-foreground transition-all duration-150 ease-in-out active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background data-[state=unchecked]:hover:border-dark-40"
    name="hello"
  >
    {#snippet children({ checked })}
      <div class="inline-flex items-center justify-center text-background">
        {#if checked === true}
          <Check class="size-[15px]" weight="bold" />
        {:else if checked === "indeterminate"}
          <Minus class="size-[15px]" weight="bold" />
        {/if}
      </div>
    {/snippet}
  </Checkbox.Root>
  <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>

API Reference

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`	`enum`	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`	`function`	A callback that is fired when the checkbox button's checked state changes. `Default: —— undefined`
`required`	`boolean`	Whether or not the checkbox is required. `Default: false`
`name`	`string`	The name of the checkbox. This is used for form submission. `Default: —— undefined`
`value`	`string`	The value of the checkbox. This is used for form submission. `Default: —— undefined`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLButtonElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-disabled`	`——`	Present when the checkbox is disabled.
`data-state`	`enum`	The checkbox's state. Can be 'checked', 'unchecked', or 'indeterminate'.
`data-checkbox-root`	`——`	Present on the root element.

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.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`isChecked`	`boolean`	Whether or not the checkbox is checked.
`isIndeterminate`	`boolean`	Whether or not the checkbox is indeterminate.
`attrs`	`object`	Additional attributes to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-checkbox-indicator`	`——`	Present on the indicator element.

Examples

Controlled Usage

If you want to control or be aware of the checked state from outside 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>