Checkbox

A control that allows the user to toggle between checked and unchecked states.

Radix UI Checkbox

When To Use

Use checkboxes when you need to allow users to:

Select one or multiple items from a list
Toggle a single option on or off
Accept terms and conditions
Enable or disable a setting
Mark tasks as complete

Checkboxes are useful for binary choices or multiple selections, as they allow users to select any number of options from a group.

Examples

Basic#

Accept terms and conditions

Checkbox Group#

Disabled#

Disabled checkbox

Disabled checked

Disabled with default checked

Custom Styling#

Blue rounded checkbox

Amber checkbox

Larger green checkbox

Animated checkbox when checked

Props

Checkbox

Prop	Type	Default
`onCheckedChange?`	`((checked: CheckedState) => void)`	-
`required?`	`boolean`	-
`checked?`	`CheckedState`	-
`asChild?`	`boolean`	-
`value?`	`string \| number \| readonly string[]`	-
`type?`	`"button" \| "submit" \| "reset"`	-
`name?`	`string`	-
`formTarget?`	`string`	-
`formNoValidate?`	`boolean`	-
`formMethod?`	`string`	-
`formEncType?`	`string`	-
`formAction?`	`string \| ((formData: FormData) => void \| Promise<void>)`	-
`disabled?`	`boolean`	-
`key?`	`Key \| null`	-
`form?`	`string`	-

Checkbox Indicator

Prop	Type	Default
`forceMount?`	`true`	-
`asChild?`	`boolean`	-
`key?`	`Key \| null`	-

Carousel

A slideshow component for cycling through elements—images or slides of text.

Collapsible

An interactive component that expands/collapses a panel.