Checkbox

Checkbox for binary on/off selection with solid, pill, and ghost variants, an indeterminate state, and rich labels with inline descriptions.

import { Checkbox } from "@plexui/ui/components/Checkbox";

Examples

Overview

variant

pill

disabled

Same as billing address

Subscribe to newsletter

With Radio Group

direction

description

Notification channel

Choose how you'd like to be notified.

EmailMessages delivered to your inbox.

SMSText messages to your phone number.

PushReal-time alerts on your device.

Topics

Select the topics you want to follow.

Product updatesNew features and improvements.

Security alertsAccount activity and login notifications.

CommunityEvents, meetups, and discussions.

Descriptions

Email notifications

Configure which emails you receive.

MarketingReceive emails about new products and features.

SecurityReceive emails about account activity and security.

Push notifications

Everything

Direct messages and mentions

Nothing

Variants

Pill

pill

Unchecked

Checked

Indeterminate

Ghost

disabled

Unchecked

Checked

Indeterminate

With description

Accept terms and conditionsBy checking this box, you agree to our Terms of Service and Privacy Policy.

Enable notificationsYou can enable or disable notifications at any time from settings.

Indeterminate

Select all

Disabled

Label orientation

orientation

Accept terms and conditions

Without label

Group with select all

Permissions

Read

Write

Execute

Group with description

Show on desktop

Select the items you want to display on the desktop.

Hard disks

External disks

CDs, DVDs, and iPods

Connected servers

With Field

showError

Terms

Please review and accept the terms before continuing.

I agree to the Terms of Service

Subscribe to product updates

You must accept the terms to continue.

Grouped sections

Email notifications

Configure which emails you receive.

MarketingReceive emails about new products and features.

SecurityReceive emails about account activity and security.

Push notifications

Configure which push notifications you receive.

Everything

Direct messages and mentions

Nothing

API

Prop	Type	Default	Description
`variant`	`"solid" \| "ghost"`	`"solid"`	Visual style: solid (filled background) or ghost (checkmark only)
`pill`	`boolean`	`false`	Fully rounded indicator corners
`checked`	`boolean \| "indeterminate"`	—	Controlled state
`defaultChecked`	`boolean \| "indeterminate"`	—	Initial state (uncontrolled)
`onCheckedChange`	`(next: boolean) => void`	—	Called with the next state when it changes
`label`	`ReactNode`	—	Accessible label. Accepts ReactNode for rich content
`description`	`ReactNode`	—	Second line below the label, linked via aria-describedby. Renders only with a label
`disabled`	`boolean`	`false`	Prevent interaction
`required`	`boolean`	—	Required for form submission
`name`	`string`	—	Form field name
`value`	`string`	`"on"`	Value when submitted
`orientation`	`"left" \| "right"`	`"left"`	Checkbox position relative to the label
`className`	`string`	—	CSS classes applied to the wrapper node
`id`	`string`	—	The id of the checkbox element (generated when omitted)
`onFocus`	`(event: FocusEvent) => void`	—	Called when the checkbox gains focus
`onBlur`	`(event: FocusEvent) => void`	—	Called when the checkbox loses focus

Styling

Checkbox reads these component tokens. Override them at any scope to restyle it:

--checkbox-indicator-size: indicator size (default var(--radio-group-indicator-size))
--checkbox-label-gap: label gap (default var(--radio-group-item-gap))
--checkbox-label-line-height: label line height (default var(--radio-group-item-line-height))
--input-border-color-invalid: border color invalid (default var(--color-border-danger-outline))

Radio GroupRadio group for single-choice selection with row or column layout, right-aligned indicators, rich item content, and card-style options.SwitchToggle switch for turning settings on or off, with an optional label, a supporting description linked for screen readers, and a configurable label position.FieldForm field wrapper with a label, helper text, an error message, and automatic accessibility linking to its control.LabelAccessible form label that points at any control by its id, so clicking it focuses or toggles the control, with consistent typography across forms.

Checkbox

Related components

On this page