Radio Group

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

Full keyboard navigation

Can be controlled or uncontrolled

Architecture

so-radio-group
Slot: default
so-radio-group-item
Slot: default
so-radio-group-description
Slot: default

Reference

  • Radio Group

    The root container that manages the state and behavior of the radio group 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 group when a visible label is not present.

      • default-value
        string
        /
        default: -

        The initial selected value when the radio group is rendered. Use when you do not need to control the checked value.

      • disabled
        boolean
        /
        default: false

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

      • name
        string
        /
        default: -

        The name of the radio group 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.

      • value
        string
        /
        default: -

        The controlled value of the radio item to check. Must be used in conjunction with onValueChange.

    • Events

      • onValueChange

        Event handler called when the checked value in the radio group 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 group 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 group.

  • Description

    The container for the radio group item'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