Checkbox

A binary choice. A real native checkbox under a styled box, so labels, forms, keyboard and the indeterminate state all work.

src/components/ui/checkbox.tsx

About

From the component's own source, where it was written.

A real <input type="checkbox"> visually replaced by a sibling box.

Keeping the native input (screen-reader-only, not hidden) means form submission, the label association, keyboard toggling and the indeterminate state all come for free — a div with role="checkbox" would have to reimplement every one of them.

Install

npx astralyx-ui add checkbox

Usage

import { Checkbox } from '@/components/ui/checkbox'

<Checkbox label="Email me updates" defaultChecked />

Composer

Change the props and the source below follows.

Email me updates

Props

size

label

description

indeterminateerrordisabled

tsx

<Checkbox
  label="Email me updates"
/>

Examples

Sizes

tsx

<Checkbox size="sm" label="Small" />
<Checkbox size="default" label="Default" />
<Checkbox size="lg" label="Large" />

With description

tsx

<Checkbox
  label="Email notifications"
  description="Product news and occasional tips. No more than twice a month."
/>

States

tsx

<Checkbox label="Unchecked" />
<Checkbox label="Checked" defaultChecked />
<Checkbox label="Indeterminate" indeterminate />
<Checkbox label="Error" error />
<Checkbox label="Disabled" disabled defaultChecked />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Checkbox`

Extends Omit<ComponentProps<'input'>, 'size' | 'type'>.

Prop	Type	Default	Description
error	boolean	false	Red border. Also sets aria-invalid.
size	'sm' \| 'default' \| 'lg'	'default'	Box and tick size.
label	ReactNode	—	Text beside the box. Also makes the whole row clickable.
description	ReactNode	—	Secondary line under the label.
indeterminate	boolean	false	Shows a dash and reports indeterminate to assistive tech. A DOM property, not an attribute — set through a ref internally.
labelPosition	'start' \| 'end'	'end'	`start` puts the label before the box, for a settings row.
containerClassName	string	—	—

Functions

Function	Signature	Description
checkboxVariants	(props?: { size?: 'sm' \| 'default' \| 'lg'; error?: boolean }) => string	A real `<input type="checkbox">` visually replaced by a sibling box.