made for Nordcraft

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

  • Supports horizontal/vertical orientation

  • Can be controlled or uncontrolled

Example

Architecture

zcore-radio-group-root
Slot: default
zcore-radio-group-item-wrapper
Slot: default
zcore-radio-group-item
Slot: default
zcore-radio-group-indicator
Slot: default

Reference

  • Root

    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.

      • aria-labelled-by
        string
        /
        default: -

        References the ID of the element that labels the radio group.

      • default-value
        string
        /
        default: -

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

      • direction
        enum
        /
        default: ltr

        The reading direction of the radio group. Affects keyboard navigation and visual presentation.

      • disabled
        boolean
        /
        default: false

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

      • id
        string
        /
        default: -

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

      • loop
        boolean
        /
        default: true

        When true, keyboard navigation will loop from last item to first and vice versa.

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

      • orientation
        enum
        /
        default: vertical

        The orientation of the radio group. Affects layout and keyboard navigation behavior.

      • 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 selected value in the radio group changes.

    • Classes

      • direction-rtl

        Applied when the reading direction is right-to-left.

      • disabled

        Applied when the radio group is disabled.

      • orientation-horizontal

        Applied when the radio group's orientation is horizontal.

  • Item wrapper

    A container component that wraps the radio item. Required for proper layout, accessibility support, and form behavior.

    • Attributes

      • aria-label
        string
        /
        default: -

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

      • aria-labelled-by
        string
        /
        default: -

        References the ID of the element that labels the radio item.

      • disabled
        boolean
        /
        default: false

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

      • id
        string
        /
        default: -

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

      • value
        string
        /
        default: -

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

  • Item

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

    • Classes

      • checked

        Applied when the radio item is in a checked state.

      • disabled

        Applied when the radio item is in a disabled state.

  • Indicator

    Visual indicator that displays when its parent radio item is checked. Can be styled directly or used as a wrapper for an icon.

    • Classes

      • checked

        Applied when the parent radio item is in a checked state.

Keyboard

  • Space

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

  • When orientation is vertical, moves focus to the next item in the group and checks it.

  • When orientation is vertical, moves focus to the previous item in the group and checks it.

  • When orientation is horizontal, moves focus to the next item and checks it in ltr or to the previous item in rtl.

  • When orientation is horizontal, moves focus to the previous item and checks it in ltr or to the next item in rtl.