Skip to content
SkillCodex
Menu

Checkbox

Checkbox

An independent binary choice that can be checked, unchecked, or sometimes indeterminate.

Try the component
Context, sources and actions
Sources and revision
Updated
Version
v1.0.26 · r2
Sources
5 sources
Status
Published
Read the sources

You may have searched for: a square I can tickchoose several preferencesagree to this condition

All phrasings
Save and share

Recognize

Choices and binary states

Try it

Is this an independent value, one exclusive grouped choice, or an on/off setting?

Checkbox

Shared trial context

A settings flow asks the user to make a choice and understand whether it is independent, exclusive, or an on/off setting.

Checkbox

Mission

Checkbox

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

Information preferences
None

Live result

No independent subscription is selected.

Step 1 of 3

Try

Try the component. Your live result appears just above. Move on at your own pace.

Behavior and edge case
What to observe
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.

What this example shows

Checkbox represents an independent checked choice; Radio group enforces one choice, while Switch expresses an on or off state. Commit timing is product policy, not the semantic distinction.

Which fits your need?

Checkbox

Selecting any number of independent options

Radio group

Choosing one shipping method from visible alternatives

Which component will you use here?
Difference and sources

Checkbox represents an independent checked choice; Radio group enforces one choice, while Switch expresses an on or off state. Commit timing is product policy, not the semantic distinction.

Read the sources

    Parts of the specimen

    Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.

    Control

    The interactive element that receives input and exposes state.

    Position in the atlas

    Relationship map

    Locate the chapter, neighboring concepts, and the next useful decision.

    • Chapter

      Choices and binary states

      Checkbox belongs to this comparison group.

    • Do not confuse

      Radio group

      Choose Checkbox if the user may check zero, one, or several options. Choose Radio group if exactly one option must be selected among visible alternatives.

      Compare this pair
    • Do not confuse

      Switch

      Choose Checkbox if the user selects any number of options or agrees to a statement, such as accepting terms. Choose Switch if a single setting is turned on or off, such as notifications or dark mode.

      Compare this pair
    • Next step

      Compare the concepts in the chapter before choosing an implementation.

      Open the chapter

    In your own words

    Understand

    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

    Choose

    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
    • The value is best expressed as an on or off setting

    Compare

    Compare similar concepts

    Verification checklist

    Try these actions in the lab, then check the same behaviours in your agent’s result. Adapt the example names to your interface.

    1. 1. Do this

      Click a checkbox’s text label, then focus that checkbox and press Space.

      Expected result

      Both actions toggle the same checkbox, and its checked state is identifiable beyond color alone.

    2. 2. Do this

      Check two independent options, then clear only the first.

      Expected result

      The second option stays checked; independent choices do not behave like a radio group.

    3. 3. Do this

      If a Select all control is present, select only some children, then activate Select all.

      Expected result

      The parent first shows a mixed state, then selects all children; the mixed state is not submitted as a third value.

    Full contract
    1. 1Every checkbox has a visible associated label
    2. 2Independent options can be toggled separately
    3. 3The mixed state is programmatic as well as visual
    4. 4Space and pointer produce the same state

    Understand → Recognize → Choose → Compare

    Pack for your agent

    Pre-written instructions to paste into your agent. Copying executes nothing.

    Implement correctly

    Build Checkbox without breaking its behavior

    # Implement Checkbox in your agent
    
    ## Objective
    Implement Checkbox for this verified behavior: An independent binary choice that can be checked, unchecked, or sometimes indeterminate.
    
    ## Prerequisites
    - Inspect the repository, design system, and existing tests first.
    - Preserve unrelated changes and keep the file scope bounded.
    - Confirm that Checkbox matches the need before writing code.
    
    ## Required behavior
    - Activation changes the binary state; when that value is persisted is a separate product decision.
    - A parent choice can expose an indeterminate state when only some child items are selected.
    
    ## States to cover
    - Checkbox unchecked
    - Checkbox checked
    
    ## Accessibility
    - ARIA role: input[type=checkbox]
    - The primary control or named region for Checkbox has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
    - Each native checkbox is a visible focus stop and its label expands the pointer target.
    - Not applicable: the checkbox persists until the user toggles it or the form resets.
    - Accessible name, checked or mixed state, required state, and validation message are exposed.
    - Tab focuses each checkbox
    - Space toggles the focused checkbox
    
    ## When not to use
    - Exactly one option must be selected
    - The value is best expressed as an on or off setting
    
    ## Acceptance criteria
    - Every checkbox has a visible associated label
    - Independent options can be toggled separately
    - The mixed state is programmatic as well as visual
    - Space and pointer produce the same state
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    
    • Web platform
    • Requires · Access to the repository, design system, and tests
    Why it works
    • The need is tied to canonical behavior before any technical choice.
    • States, accessibility, and non-goals prevent a merely visual implementation.
    • Acceptance criteria and the output format make verification observable.

    Try next

    Verify Checkbox on a real journey

    # Verify Checkbox after implementation
    
    ## Objective
    Audit the Checkbox implementation against its behavior, states, and accessibility requirements without changing it automatically.
    
    ## Checks
    - Replay the smallest representative journey.
    - Check keyboard behavior, focus, accessible name, and announcements.
    - Tie each gap to a specific acceptance criterion.
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    

    sha256:fb445f68accc501656d510f4acd4d671b2a5badbd4540b5c3b7cdcf1141a157f

    Diagnose a problem

    Find and fix the Checkbox defect

    # Debug Checkbox in your agent
    
    ## Observed symptom
    [DESCRIBE THE SYMPTOM HERE]
    
    ## Observable checks
    - Reproduce the issue with the smallest relevant journey.
    - Compare behavior with the documented states and transitions for Checkbox.
    - Verify keyboard behavior, focus, accessible name, and announcements.
    
    ## Possible causes
    - The chosen primitive does not match the expected behavior.
    - A state, transition, or focus return is missing.
    - A neighboring component captures an event or hides an accessible signal.
    
    ## Bounded corrections
    - Fix the reproduced cause without recreating neighboring components.
    - Preserve the public contract and add a focused regression test.
    - Do not install dependencies or change remote state without authorization.
    
    ## Final verification
    - Every checkbox has a visible associated label
    - Independent options can be toggled separately
    - The mixed state is programmatic as well as visual
    - Space and pointer produce the same state
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    
    • Web platform
    • Requires · Access to the repository, design system, and tests
    Why it works
    • The explicit symptom prevents starting from an assumed fix.
    • Checks separate behavior, accessibility, and neighboring interference.
    • The fix stays bounded and must produce regression evidence.

    Try next

    Lock in the Checkbox fix

    # Prevent the Checkbox regression
    
    ## Objective
    Turn the reproduced cause into a focused regression test and compare Checkbox with neighboring concepts before widening the fix.
    
    ## Checks
    - Prove that the test fails before the fix.
    - Prove that it passes after the bounded fix.
    - Verify that no neighboring component changed behavior.
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    

    sha256:fe210c0544da5e94b877f4a3e2ec4419503308ee4f478d908af8ce6ec8ad8cf5

    Full entry, saving and provenance

    Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.

    Pack digest: sha256:201017fe7baea0c19cd08c4e75f59ac03802497f2f311e5f3994d0285cf44dd8

    In code

    TechnologyPrimitiveVersionCaveat
    Web platform

    input[type=checkbox]

    NativeNative checkbox semantics are retained, including form submission and the programmatic indeterminate state.

    Technical details

    Behaviors

    • Toggle a choice

      Activation changes the binary state; when that value is persisted is a separate product decision.

    • 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.

    Visual signals

    • Square control beside a persistent label
    • Check mark for selected state
    • Dash may represent a mixed state

    Behavioral signals

    • Each checkbox changes independently
    • Space toggles the focused box
    • Its value usually joins form submission

    Accessibility

    Role
    input[type=checkbox]
    Accessible name
    The primary control or named region for Checkbox 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

    Open the HTML, ARIA, Radix, and shadcn matrix
    • 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
      sourceId
      source-ui-html-input
      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
      sourceId
      source-ui-aria-checkbox
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-09T07:07:36Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:d181058b11445310619a7ce2a021f27e346ce3b2112eb32787f9157dbfee011a
      status
      verified

      Claim covered: Checkbox: informative APG guidance for the checkbox pattern: roles, states, relationships, and keyboard interaction.

    • WHATWG HTML: The input element
      sourceId
      source-ui-html-input
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/input.html#the-input-element
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:4699d26dbf428296b4b352b480b75c846a9a6b23cf3f124d6d6fe6b5e19d4eba
      status
      verified

      Claim covered: Checkbox: normative native semantics, states, attributes, and browser behavior for input.

    • WHATWG HTML: Forms
      sourceId
      source-ui-html-forms
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/forms.html
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:730c20c8a823ab6b9a40c77d4731d6aab46895cd98c388fe12c966096d5bdd18
      status
      verified

      Claim covered: Checkbox: normative native semantics, states, attributes, and browser behavior for HTML form controls.

    • WCAG 2.2: Focus Appearance
      sourceId
      source-ui-wcag-understanding-focus-appearance
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:fdcf316a1f0e3cc758eda9618322d132862124ff0a3f3b1a3acbf20daf804ff0
      status
      verified

      Claim covered: Checkbox: informative WCAG guidance for evaluating visible keyboard focus appearance.

    • WAI-ARIA 1.2: Roles Model
      sourceId
      source-ui-wai-aria-roles
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#roles
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Claim covered: Checkbox: normative ARIA role definitions and constraints for the stated accessible role.