ninna-ui

Checkbox

Checkbox component for boolean selection with support for indeterminate state, labels, and multiple sizes.

import { Checkbox } from "@ninna-ui/forms"

pnpm add @ninna-ui/forms

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Checkbox component in your application.

import { Checkbox } from "@ninna-ui/forms";

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

Basic

Basic checkbox with label.

Accept terms and conditions

Variants

Checkbox supports outline, soft, and solid variants.

Outline variant

Soft variant

Solid variant

Sizes

Checkbox comes in 3 sizes: sm, md, and lg.

Small checkbox

Medium checkbox

Large checkbox

Label Position

Position the label on either side of the checkbox.

Label on the right (default)

Label on the left

Custom Icon

Use custom icons for the checked state.

Heart icon

Star icon

Thumbs up icon

Indeterminate

Checkbox with indeterminate state for partial selection.

Select all

Option 1

Option 2

Option 3

With Description

Checkbox with label and description text.

Marketing emailsReceive emails about new products, features, and more.

Security updatesGet notified about security updates and alerts.

React Hook Form

Checkbox works with React Hook Form using the Controller pattern. Use Field wrapper for error messages.

API Reference

Complete list of props for the Checkbox component.

Props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the checkbox
`color`	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Color theme of the checkbox
`variant`	`'outline' \| 'soft' \| 'solid'`	`'outline'`	Visual variant of the checkbox
`checked`	`boolean`	-	Controlled checked state
`defaultChecked`	`boolean`	-	Default checked state for uncontrolled usage
`onCheckedChange`	`(checked: boolean) => void`	-	Callback when checked state changes
`label`	`ReactNode`	-	Label text for the checkbox
`description`	`ReactNode`	-	Description text below the label
`labelPosition`	`'start' \| 'end'`	`'end'`	Position of the label relative to checkbox
`invalid`	`boolean`	`false`	Whether the checkbox is in an invalid state
`icon`	`ReactNode`	-	Custom icon for checked state
`indeterminateIcon`	`ReactNode`	-	Custom icon for indeterminate state
`disabled`	`boolean`	`false`	Whether the checkbox is disabled
`required`	`boolean`	`false`	Whether the checkbox is required

Accessibility

Built on Radix UI Checkbox for full accessibility
Proper focus states with visible outlines
Supports keyboard navigation (Space to toggle)
Labels are properly associated with checkboxes via htmlFor
Indeterminate state uses aria-checked="mixed" for screen readers