Checkbox

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

@@directive("'use client'")

@react.component

Installation

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/Checkbox
Copy

Usage

Copy<Checkbox />

Checked State

Use defaultChecked for uncontrolled checkboxes, or checked and onCheckedChange to control the state.

Copymodule Example = {
  @react.component
  let make = () => {
    let (checked, setChecked) = React.useState(() => false)
 
    <Checkbox checked onCheckedChange={v => setChecked(_ => v)} />
  }
}

Invalid State

Set aria-invalid on the checkbox and data-invalid on the field wrapper to show the invalid styles.

@react.component
let make = () =>
  <Field.Group className="mx-auto w-56">

Examples

Basic

Pair the checkbox with Field and FieldLabel for proper layout and labeling.

@react.component
let make = () =>
  <Field.Group className="mx-auto w-56">

Description

Use FieldContent and FieldDescription for helper text.

@react.component
let make = () =>
  <Field.Group className="mx-auto w-72">

Disabled

Use the disabled prop to prevent interaction and add the data-disabled attribute to the <Field> component for disabled styles.

@react.component
let make = () =>
  <Field.Group className="mx-auto w-56">

Group

Use multiple fields to create a checkbox list.

@react.component
let make = () =>
  <Field.Set>

Table

@@directive("'use client'")

type row = {

API Reference

See the Base UI documentation for more information.