Checkbox

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

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

Root

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

Prop	Default	Type/Description
`disabled`	`false`	`boolean` Whether or not the checkbox button is disabled. This prevents the user from interacting with it.
`checked`	`false`	`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.
`onCheckedChange`	-	`(checked: boolean \| 'indeterminate') => void` A callback that is fired when the checkbox button's checked state changes.

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

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.

Prop	Default	Type/Description
`value`	`false`	`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`.
`disabled`	`false`	`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.

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 🚧