Checkbox

Checkbox

<Checkbox>Subscribe to updates</Checkbox>
<Checkbox isIndeterminate>Select all</Checkbox>

Install: @helixui/core

import { Checkbox } from '@helixui/core'

status: stable · since: 0.1.0

Tags: boolean, toggle, multi-select, form

Live playground

Open the full editor or source on GitHub.

Anatomy

[ ☐ ]  Label       ← unchecked
[ ☑ ]  Label       ← checked
[ ▣ ]  Label       ← indeterminate

Layout

• display — inline-flex
• width — content
• height — content
• intrinsicSize — ~20px box + label gap
• stackable — true
• fullBleed — false

Visual

A small rounded square (radius.sm) that fills with brand color when checked, with a white check glyph. Indeterminate state shows a horizontal bar. Label sits to the right with space.2 gap.

Props

Name	Type	Default	Description
isSelected	boolean	false	Controlled checked state.
defaultSelected	boolean	false	Uncontrolled initial state.
isIndeterminate	boolean	false	Shows a dash glyph indicating mixed state.
isRequired	boolean	false	Marks required for validation.
isInvalid	boolean	false	Forces invalid state.
isDisabled	boolean	false	Disables interaction.
onChange	(isSelected: boolean) => void	—	Change handler.
...rest	CheckboxProps from react-aria-components	—	All forwarded.

Slots

• children — visible label text

Tokens used

color.bg.surface.default, color.bg.action.brand.default, color.text.primary, color.text.on.brand, color.border.strong, color.border.focus, color.border.danger, radius.sm, space.2, font.family.sans, font.size.sm

Accessibility

Role: checkbox

Keyboard

Key	Action
Space	Toggles the checkbox.

Notes

• Built on react-aria-components Checkbox — full keyboard, screen-reader, and indeterminate handling.
• For groups of related options, use CheckboxGroup (follow react-aria-components).

Composes with

Component	Relation	Note
Field	parent	Use Field if you need separate label/description structure.
Form	parent	Submitted as part of a Form.
Switch	sibling
RadioGroup	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

agree-to-terms

“checkbox to accept terms”

<Checkbox isSelected={ok} onChange={setOk}>I agree to the terms</Checkbox>

select all in a table

“header checkbox with indeterminate when partially selected”

<Checkbox isIndeterminate={partial} isSelected={all} onChange={toggleAll}>Select all</Checkbox>

Related

• Switch
• RadioGroup