Checkbox Cards

A selectable card component that combines the functionality of checkboxes with rich content presentation. Allows users to make multiple selections from a group of visually enhanced options, ideal for scenarios requiring more detailed choice presentation than standard checkboxes.

Full keyboard navigation

Can be controlled or uncontrolled

Architecture

so-checkbox-cards
Slot: default
so-checkbox-cards-item
Slot: default
so-checkbox-cards-title
Slot: default
so-checkbox-cards-description
Slot: default

Reference

  • Checkbox Cards

    The root container that manages the state and behavior of the checkbox cards group. Coordinates the interaction between individual items and maintains the overall selection state.

    • Attributes

      • aria-label
        string
        /
        default: -

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

      • default-value
        string[]
        /
        default: -

        The initial selected values when the checkbox cards are rendered. Use when you do not need to control the selection state.

      • value
        string[]
        /
        default: -

        The controlled selected values of the checkbox cards. Must be used in conjunction with onValueChange.

    • Events

      • onValueChange

        Event handler called when the selection state of any checkbox card changes.

  • Item

    The container for an individual selectable card option. Manages the selection state and visual presentation of a single choice within the group.

    • Attributes

      • aria-label
        string
        /
        default: -

        Defines an accessible label for the individual checkbox card when a visible label is not present or when additional context is needed.

      • value
        string
        /
        default: -

        A unique identifier for the checkbox card. Used to track and control the selection state.

  • Title

    The container for the card's title content. Provides proper styling and layout for the main heading of each checkbox card.

  • Description

    The container for the card's descriptive content. Allows for additional details or context to be displayed below the title.

Keyboard

  • Tab

    Moves focus to either the checked item or the first item in the group.

  • Space

    When focus is on an item, toggles its checked state.

  • Enter

    When focus is on an item, toggles its checked state.

  • Moves focus to the next item in the group.

  • Moves focus to the previous item in the group.

  • Home

    Moves focus to the first item in the group.

  • End

    Moves focus to the last item in the group.

made for toddle