Checkbox

A control component that allows users to toggle between checked and unchecked states. Implements proper ARIA attributes for accessibility support and can be used within forms. Supports an additional indeterminate state for complex selection scenarios.

Supports indeterminate state

Full keyboard navigation

Can be controlled or uncontrolled

Architecture

so-checkbox

Reference

  • Checkbox

    Manages the checkbox's state and coordinates the interaction between the visual indicator and the hidden input element, ensuring proper form submission and accessibility support.

    • Attributes

      • aria-label
        string
        /
        default: -

        Defines an accessible label for the checkbox when a visible label is not present.

      • checked
        boolean
        /
        default: -

        The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.

      • default-checked
        boolean
        /
        default: false

        The initial checked state when the checkbox is rendered. Use when you do not need to control its checked state.

      • disabled
        boolean
        /
        default: false

        When true, prevents the user from interacting with the checkbox.

      • id
        string
        /
        default: -

        ID that is forwarded to the underlying element for DOM manipulation.

      • name
        string
        /
        default: -

        The name of the checkbox when used within a form. Submitted with its owning form as part of a name/value pair.

      • required
        boolean
        /
        default: false

        When true, indicates that the checkbox must be checked before the owning form can be submitted.

      • tabindex
        number
        /
        default: 0

        The tab order of the checkbox within the document's focus flow. Use this to customize the focus sequence when needed.

      • value
        string
        /
        default: on

        The value submitted with the form when the checkbox is checked. Defaults to "on" if not specified.

    • Events

      • onCheckedChange

        Event handler called when the checked state of the checkbox changes.

Keyboard

  • Space

    Toggles the checkbox between checked and unchecked states.

made for toddle