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>
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
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 | Value/Description |
|---|---|
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' |
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 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 |
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 🚧