Checkbox

Select independent options with checked, unchecked, and indeterminate states in forms or bulk selection.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Checkbox for an independent option or for selecting multiple options. Use Radio for a mutually exclusive choice, Switch for a two-state setting that takes effect immediately, and the built-in selection protocol for a DataTable selection column.

Bind an independent boolean with bind:checked. For multiple selections, use bind:group and give each option a stable value.
Manage indeterminate separately from checked to represent a partial selection. Provide a label or ariaLabel, and use disabled when the option is unavailable.

Import

import { Checkbox } from '@snowui-design-system/components';

Usage

States

Selection

Sizes

Disabled

API Reference

Property	Type	Default	Example	Description
`checked`	`boolean`	`false`	`checked`	Selected state; supports two-way binding.
`group`	`any[]`	`—`	`group={group}`	Array of selected values for a group; bind it together with each option’s value.
`value`	`any`	`—`	`value={value}`	Value used in form submission and group selection.
`size`	`ResourceSize \| number`	`—`	`size={42}`	Component size in pixels, following the Icon size scale: 12, 16, 20, 24, 28, 32, 40, 48, or 80.
`disabled`	`boolean`	`false`	`disabled`	Disable user interaction.
`indeterminate`	`boolean`	`false`	`indeterminate`	Partially selected state; supports two-way binding.
`onCheckedChange`	`(checked: boolean) => void`	`—`	`onCheckedChange={(value) => { /* handle value */ }}`	Callback after the native checked state changes.
`ariaLabel`	`string`	`—`	`ariaLabel="Example"`	Accessible name when no visible label is provided.
`children`	`Snippet`	`—`	`<Checkbox>Content</Checkbox>`	Visible label content.
`singleLine`	`boolean`	`true`	`singleLine`	Labels and controls use one line by default, with stable attachments. A constrained label may show an ellipsis while retaining its complete accessible name and original children. Set false for complex multiline content. Compose Text lines={1} for a full-text tooltip.
`gap`	`number`	`—`	`gap={42}`	Inherited Frame gap token index. Omit it for the original component gap; explicit values override the preferred gap. Effective spacing stays at least 4 CSS px, including zero and root-font or gap-scale reductions. Larger preferred gaps are preserved.
`enableResponsive`	`boolean`	`false`	`enableResponsive`	Enable responsive behavior.
`enableContext`	`boolean`	`false`	`enableContext`	Enable component context.