Checkbox

Checkboxes let users select one or more items from a list, or toggle a single option on or off.

Interactive preview

Toggle props to see how the Checkbox responds.

Label

Disabled

Accept terms

Checked: false

Props

Prop	Type	Default	Description
label	string	—	Text displayed beside the checkbox.
checked	boolean	—	Controlled checked state.
defaultChecked	boolean	—	Initial checked state for uncontrolled usage.
disabled	boolean	false	Disables interaction and applies disabled styles.
name	string	—	Form field name, also used as fallback id.
className	string	""	Additional Tailwind classes for the wrapper.
...props	InputHTMLAttributes<HTMLInputElement>	—	Standard checkbox input attributes.

Installation

Install packages

pnpm add @akanaka-design/components @akanaka-design/tokens

Styles (app root)

import "@akanaka-design/tokens/css";
import "@akanaka-design/components/styles.css";

Usage

Basic usage

import { Checkbox } from "@akanaka-design/components";

export function Example() {
  return <Checkbox label="Accept terms and conditions" />;
}

Controlled

Manage state externally for forms or conditional logic:

Controlled

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

<Checkbox 
  label="Subscribe to newsletter"
  checked={checked}
  onChange={(e) => setChecked(e.target.checked)}
/>

Disabled states

<Checkbox label="Available option" />
<Checkbox label="Unavailable option" disabled />
<Checkbox label="Checked but disabled" checked disabled />

Checkbox group

Group related checkboxes with a fieldset:

Checkbox group

<fieldset className="space-y-2">
  <legend className="font-medium text-neutral-900 mb-2">
    Notification preferences
  </legend>
  <Checkbox name="notifications" label="Email" />
  <Checkbox name="notifications" label="SMS" />
  <Checkbox name="notifications" label="Push notifications" />
</fieldset>

Guidelines

When to use

Multiple selections from a list
Binary on/off choices (e.g., "Remember me")
Terms acceptance or opt-ins

When not to use

Mutually exclusive options — use radio buttons
Instant on/off settings — consider a toggle switch
Single selection from many options — use a select or radio group

Content

Use positive, action-oriented labels ("Send me updates" not "Don't send updates")
Keep labels concise but descriptive
Group related checkboxes with a clear legend