Checkbox

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

	<script lang="ts">
  import { Checkbox } from "$lib";
  import { Label } from "$lib";
  import { Check, Minus } from "phosphor-svelte";
</script>
 
<div class="flex items-center space-x-3">
  <Checkbox.Root
    id="terms"
    aria-labelledby="terms-label"
    class="peer inline-flex items-center justify-center rounded-md border border-muted bg-foreground sq-[25px] active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background"
    checked="indeterminate"
  >
    <Checkbox.Indicator
      let:isChecked
      let:isIndeterminate
      class="inline-flex items-center justify-center text-background"
    >
      {#if isChecked}
        <Check class="sq-[15px]" weight="bold" />
      {:else if isIndeterminate}
        <Minus class="sq-[15px]" weight="bold" />
      {/if}
    </Checkbox.Indicator>
  </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>

	<script lang="ts">
  import { Checkbox } from "$lib";
  import { Label } from "$lib";
  import { Check, Minus } from "phosphor-svelte";
</script>
 
<div class="flex items-center space-x-3">
  <Checkbox.Root
    id="terms"
    aria-labelledby="terms-label"
    class="peer inline-flex items-center justify-center rounded-md border border-muted bg-foreground sq-[25px] active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background"
    checked="indeterminate"
  >
    <Checkbox.Indicator
      let:isChecked
      let:isIndeterminate
      class="inline-flex items-center justify-center text-background"
    >
      {#if isChecked}
        <Check class="sq-[15px]" weight="bold" />
      {:else if isIndeterminate}
        <Minus class="sq-[15px]" weight="bold" />
      {/if}
    </Checkbox.Indicator>
  </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>

	<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`	`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`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.
`attrs`	`object`	Additional attributes 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`

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.

🚧 UNDER CONSTRUCTION 🚧