Components

Checkbox

A checkbox input for toggling boolean values. Supports multiple sizes, colors, labels, and descriptions.

Installation

npm install @trinkui/react

Import

import { Checkbox } from "@trinkui/react";

Usage

Basic checkbox with a label.

<Checkbox label="Accept terms and conditions" />

<Checkbox
  label="Subscribe to newsletter"
  description="Get weekly updates about new features."
/>

Sizes

Available in three sizes: sm, md, and lg.

<Checkbox size="sm" label="Small checkbox" />
<Checkbox size="md" label="Medium checkbox" />
<Checkbox size="lg" label="Large checkbox" />

Colors

Use the color prop to change the checked state color.

<Checkbox color="primary" label="Primary" defaultChecked />
<Checkbox color="secondary" label="Secondary" defaultChecked />
<Checkbox color="success" label="Success" defaultChecked />
<Checkbox color="warning" label="Warning" defaultChecked />
<Checkbox color="danger" label="Danger" defaultChecked />

Controlled

Use checked and onChange for controlled behavior.

const [checked, setChecked] = useState(false);

<Checkbox
  checked={checked}
  onChange={setChecked}
  label="Controlled checkbox"
/>

Props

Prop	Type	Default	Description
checked	boolean	-	Controlled checked state
defaultChecked	boolean	false	Initial checked state for uncontrolled usage
onChange	(checked: boolean) => void	-	Callback when the checked state changes
label	string	-	Label text displayed next to the checkbox
description	string	-	Helper text displayed below the label
disabled	boolean	false	Disable the checkbox
size	"sm" \| "md" \| "lg"	"md"	Size of the checkbox
color	"primary" \| "secondary" \| "success" \| "warning" \| "danger"	"primary"	Color of the checkbox when checked

Accessibility

Uses a visually hidden native <input type="checkbox"> for full screen reader and form compatibility.
Supports keyboard toggle with Space key.
Label is associated with the input via htmlFor, so clicking the label toggles the checkbox.
Focus ring is visible when navigating with keyboard.

← Card Chip →