Radio Cards

A set of checkable radio cards where no more than one of the cards can be checked at a time. Implements theARIA radio pattern for proper accessibility support.

Full keyboard navigation

Uncontrolled mode for easy implementation

Architecture

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

Reference

  • Radio Cards

    The root container that manages the state and behavior of the radio cards system. Coordinates the interaction between radio items and implements proper ARIA attributes for accessibility support.

    • Attributes

      • aria-label
        string
        /
        default: -

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

      • default-value
        string
        /
        default: -

        The initial selected value when the radio cards is rendered.

      • disabled
        boolean
        /
        default: false

        When true, prevents the user from interacting with the radio cards and all its items.

      • name
        string
        /
        default: -

        The name of the radio cards 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 a value must be selected before the owning form can be submitted.

    • Events

      • onValueChange

        Event handler called when the checked value in the radio cards changes.

  • Item

    The interactive radio button element that can be checked. Implements proper ARIA attributes for accessibility.

    • Attributes

      • aria-label
        string
        /
        default: -

        Defines an accessible label for the radio cards item when a visible label is not present.

      • disabled
        boolean
        /
        default: false

        When true, prevents the user from interacting with this specific radio item.

      • value
        string
        /
        default: -

        The unique value of the radio item. Used to identify the selected item within the radio cards.

  • Title

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

  • Description

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

Keyboard

  • Tab

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

  • Space

    When focus is on an unchecked radio item, checks it.

  • Moves focus and checks the next radio item in the group.

  • Moves focus to the previous radio item in the group.

made for toddle