Checkbox

free

Checkbox handles independent choices in settings, filters, and multi-select flows.

Notification channels

Select the channels that should receive weekly account updates.

EmailProductSMS

import { useState } from 'react';
import Checkbox from '@/components/ui/checkbox';
import type { CheckboxGroupValue } from '@/components/ui/checkbox';

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Checkbox

pnpm dlx nateui@latest add Checkbox

yarn dlx nateui@latest add Checkbox

Examples

Basic

UncheckedChecked by default

import Checkbox from '@/components/ui/checkbox';

export default function BasicDemo() {
  return (

Group

InvoicesUsageSecurity

import { useState } from 'react';
import Checkbox from '@/components/ui/checkbox';
import type { CheckboxGroupValue } from '@/components/ui/checkbox';

Vertical

Owner approvalFinance reviewLegal review

import Checkbox from '@/components/ui/checkbox';

export default function VerticalDemo() {
  return (

States

Active selectionDisabled uncheckedDisabled checkedRead-only checked

import Checkbox from '@/components/ui/checkbox';

export default function StatesDemo() {
  return (

Indeterminate

2 permissions selected

createeditarchive

import { useState } from 'react';
import Checkbox from '@/components/ui/checkbox';
import type { CheckboxGroupValue } from '@/components/ui/checkbox';

Custom Color

Success reviewNeeds attentionInformational notice

import Checkbox from '@/components/ui/checkbox';

export default function CustomColorDemo() {
  return (

Controlled

I approve the terms and conditionsCurrent value: not approved

import { useState } from 'react';
import Button from '@/components/ui/button';
import Checkbox from '@/components/ui/checkbox';

API

Checkbox exposes a root checkbox input and a compound Checkbox.Group for multiple selections.

Checkbox

Checkbox accepts the props below plus native props for the underlying input.

Prop	Description	Type	Default
`checked`	Controls the checked state.	`boolean`	-
`checkboxClass`	Class names applied to the checkbox control for color or local styling.	`string`	-
`children`	Label content rendered beside the checkbox control.	`ReactNode`	-
`className`	Class names applied to the root label.	`string`	-
`defaultChecked`	Initial checked state for uncontrolled usage.	`boolean`	-
`disabled`	Prevents pointer interaction and applies disabled styling.	`boolean`	-
`indeterminate`	Renders the indeterminate mark when the checkbox is checked.	`boolean`	`false`
`labelRef`	Ref forwarded to the root label element.	`Ref<HTMLLabelElement>`	-
`name`	Name passed to the input, or inherited from `Checkbox.Group`.	`string`	Group `name`
`onChange`	Called with the next checked state and the input change event.	`CheckboxChangeHandler`	-
`readOnly`	Prevents the component from changing its internal state.	`boolean`	-
`ref`	Ref forwarded to the underlying checkbox input.	`Ref<HTMLInputElement>`	-
`value`	Value used by `Checkbox.Group` and passed through to the input.	`CheckboxValue`	-
`...nativeInputProps`	Native props for the underlying checkbox input, except `onChange`.	`NativeCheckboxInputProps`	-

Checkbox.Group

Checkbox.Group accepts the props below plus native props for the root div.

Prop	Description	Type	Default
`checkboxClass`	Class names shared by every checkbox control inside the group.	`string`	-
`children`	Checkbox items rendered inside the group.	`ReactNode`	-
`className`	Class names applied to the group root.	`string`	-
`name`	Name shared by checkbox inputs inside the group.	`string`	-
`onChange`	Called with the next selected value array and the source event.	`CheckboxGroupChangeHandler`	-
`ref`	Ref forwarded to the group root.	`Ref<HTMLDivElement>`	-
`value`	Controlled selected values for the group.	`CheckboxGroupValue`	-
`vertical`	Stacks group items vertically.	`boolean`	`false`
`...nativeDivProps`	Native props for the group root `div`, except `onChange`.	`NativeCheckboxGroupDivProps`	-

Types

type CheckboxValue = string | number | boolean;
type CheckboxGroupValue = string[];
type CheckboxChangeHandler = (
  checked: boolean,
  event: ChangeEvent<HTMLInputElement>,
) => void;
type CheckboxGroupChangeHandler = (
  value: CheckboxGroupValue,
  event: SyntheticEvent,
) => void;
type NativeCheckboxInputProps = Omit<
  ComponentPropsWithRef<'input'>,
  'onChange'
>;
type NativeCheckboxGroupDivProps = Omit<
  ComponentPropsWithRef<'div'>,
  'onChange'
>;