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

Example

Architecture

sc-checkbox-root
Slot: default
sc-checkbox-content
Slot: default
sc-checkbox-indicator
Slot: default Content here is rendered when the checkbox is checked.
Slot: indeterminate Content here is rendered when the checkbox is indeterminate.

Reference

  • Root

    The root container that manages the checkbox's state and behavior. 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.

      • aria-labelled-by
        string
        /
        default: -

        References the ID of the element that labels the checkbox.

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

  • Content

    The interactive checkbox element that is rendered as a button. Handles user interactions and visual state changes.

    • Classes

      • checked

        Applied when the checkbox is in a checked state.

      • indeterminate

        Applied when the checkbox is in an indeterminate state.

  • Indicator

    The visual indicator that displays when the checkbox is in a checked or indeterminate state. Can be styled directly or used as a wrapper for an icon.

    • Classes

      • checked

        Applied when the checkbox is in a checked state.

      • indeterminate

        Applied when the checkbox is in an indeterminate state.

Keyboard

  • Space

    Toggles the checkbox between checked and unchecked states.

made for toddle