Checkbox

Accessible checkbox control with animated check mark and state management.

On This Page

Accessible checkbox control with animated check mark and state management.

Accessible check control with animated tick icon and state management.

checkboxMultiple choices from a list or optional standalone opt-in toggles requiring explicit form submission.

switch (alternative)Immediate binary state activation without needing a Save/Submit button.

radio (alternative)Mutually exclusive single selection where exactly one option must be chosen.

Live CanvasInteractive

Controls(2)

checked

boolean

Toggle state:

The checked state of the checkbox

disabled

boolean

Toggle state:

Whether the checkbox is interactive or disabled

Generated JSX

import { Checkbox } from "nexoreui"

<Checkbox />

component.tsx

Accept terms and conditions

You agree to our Terms of Service and Privacy Policy.

component.tsx

Security audit emails

Receive automated alerts whenever a new API key is created.

component.tsx

Disabled Unchecked

Disabled Checked

component.tsx

Prop	Type	Default	Description
checked	boolean \| 'indeterminate'	`false`	Controlled state of the checkbox.
defaultChecked	boolean	`false`	Initial checked state when uncontrolled.
onCheckedChange	(checked: boolean \| 'indeterminate') => void	`—`	Event handler called when the checked state changes.
disabled	boolean	`false`	Disables interaction and dims visual contrast.
required	boolean	`false`	HTML form required attribute for native validation.
name	string	`—`	Name of the input field for form submission.
value	string	`'on'`	Value attribute of the underlying HTML input.
className	string	`—`	Additional Tailwind CSS utility classes.

Keyboard Navigation: Fully focusable using Tab, and toggles on Space.
ARIA conformance: Implements Radix UI Checkbox primitive with proper role="checkbox", aria-checked, and automated state synchronization for screen readers.

On This Page