Checkbox

Component preview

An independent form choice that can be checked, unchecked, or sometimes indeterminate before a form is submitted.

Build pack

Turn this concept into a useful prompt

Choose the task and destination. Technical names stay in English.

What do you want to do?

CreateModifyRepair

Where will you use the prompt?Prompt languageLanguage of the interface to build

Your objective

In your own words

What people describe

Documented aliases: tick box, check box, multi-select choice

a square I can tick
choose several preferences
agree to this condition
select some items independently
a box with a check mark
show that only some child items are chosen

Try it

Choices and binary states

Compare all three behaviors

Shared comparison scenario: A settings flow asks the user to make a choice and understand whether it is independent, exclusive, or applied immediately.

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Checkbox

Checkbox represents an independent choice that may wait for submission; Radio group enforces one choice, while Switch applies an on or off setting immediately.

Your task

Toggle two preferences with Space, then use the parent checkbox to demonstrate the mixed state.

Edge case to verify

The Select all parent becomes indeterminate when only some child choices are checked.

Mission

Checkbox

Toggle two preferences with Space, then use the parent checkbox to demonstrate the mixed state.

Primary state: Each labeled option exposes its own checked state and can be submitted with the form.

Information preferencesSelect all

Product updatesMonthly tips

None

Parts of the specimen

Select a marker directly on the specimen, or use the list below, to see its role. Hide the markers to operate the lab without obstruction.

Control

The interactive element that receives input and exposes state.

Use it when

Selecting any number of independent options
Confirming a condition as part of a form

Avoid it when

Exactly one option must be selected
Changing the control must immediately alter a system setting

Compare similar concepts

Radio group permits exactly one choice; Checkbox choices are independent, while Switch changes one immediate on or off setting.

Radio group

Switch applies one setting immediately; Checkbox usually records a choice for later submission, and Radio group chooses one value among alternatives.

Switch

Technical details

Behaviors

Toggle a choice
Activation changes the checked state without triggering an immediate system setting.
Represent a mixed state
A parent choice can expose an indeterminate state when only some child items are selected.

States

Checkbox unchecked
Checkbox unchecked
Checkbox checked
Checkbox checked

State transitions

Checkbox unchecked → Checkbox checked
Pointer, touch, or Space activates the unchecked independent choice.
Checkbox checked → Checkbox unchecked
Pointer, touch, or Space activates the checked independent choice again.

Test scenarios

Context: A notification form lets users choose email, weekly summary, and product tips independently.
Mission: Toggle two preferences with Space, then use the parent checkbox to demonstrate the mixed state.
Primary state: Each labeled option exposes its own checked state and can be submitted with the form.
Edge case: The Select all parent becomes indeterminate when only some child choices are checked.

Accessibility

Role: native checkbox
Accessible name: The primary control or named region has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
Focus: Each native checkbox is a visible focus stop and its label expands the pointer target.
Dismissal: Not applicable: the checkbox persists until the user toggles it or the form resets.
Scroll: Scrolling the page does not change the value. The focused control and any associated message remain visible above fixed interface regions.
Announcement: Accessible name, checked or mixed state, required state, and validation message are exposed.
Keyboard: Tab focuses each checkbox
Space toggles the focused checkbox

Bindings

input[type=checkbox]
implementationKind
native
nativeElement
input[type=checkbox]
ariaPattern
checkbox
radixPrimitive
Not applicable
shadcnRecipe
Not applicable
runtimeDependency
Not applicable
packageName
Not applicable
exportName
Not applicable
exactVersion
Not applicable
status
verified
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Not applicable
validFrom
Not applicable
validUntil
Not applicable
Equivalence caveat: Native checkbox semantics are retained, including form submission and the programmatic indeterminate state.
Verify binding source

Sources

WAI-ARIA APG: Checkbox Pattern
W3C WAI · standard · 2026-07-16
Claim covered: Checkbox: checkbox states, labeling, and Space-key interaction guidance.
WHATWG HTML: The input element
WHATWG · standard · 2026-07-16
Claim covered: Checkbox: native input types, labeling, state, validation, and form participation.

Verified on 2026-07-16 · rev. 1

Owner: SkillCodex Editorial
Status: review
Review: Independent editorial review pending
Next review: 2026-10-16
Publication: Not published
Change history: Initial sourced MVP draft; independent language review pending.