For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt, and this page is available as Markdown at https://wallarm.github.io/design-system/components/radio.md.
Design System

    Radio

    Picks exactly one option from a set — reach for Checkbox when several answers can be true at once, and Select past roughly ten options. Radios cannot be cleared once chosen, so include the neutral answer as an option rather than expecting the reader to undo.

    Source · Storybook

    Usage

    import { Info } from '@wallarm-org/design-system/icons';
import { Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel } from '@wallarm-org/design-system/Radio';
import { Tooltip, TooltipContent, TooltipTrigger } from '@wallarm-org/design-system/Tooltip';

    Examples

    Card

    variant='card' gives every option its own bordered surface. As with Checkbox, cards exist to carry a RadioDescription — a card holding a bare label wastes the room it asks for.

    Form field

    Wrapped in Field, so the question above the options comes from FieldLabel and FieldDescription. Shown as plain rows and as cards.

    Props

    PropTypeDefaultDescription
    titlestring | undefined
    defaultCheckedboolean | undefined
    defaultValuestring | number | readonly string[] | undefined
    autoFocusboolean | undefined
    idstring | undefined
    tabIndexnumber | undefined
    relstring | undefined
    onChangeChangeEventHandler<T, Element> | undefined
    disabledboolean | undefined
    value *string
    asChildboolean | undefinedUse the provided child element as the default rendered element, combining their props and behavior.
    htmlForstring | undefined
    invalidboolean | undefined
    data-testidstring | undefined

    RadioDescription

    PropTypeDefaultDescription
    titlestring | undefined
    defaultCheckedboolean | undefined
    defaultValuestring | number | readonly string[] | undefined
    autoFocusboolean | undefined
    idstring | undefined
    tabIndexnumber | undefined
    relstring | undefined
    onChangeChangeEventHandler<T, Element> | undefined

    RadioGroup

    PropTypeDefaultDescription
    formstring | undefinedThe associate form of the underlying input.
    titlestring | undefined
    defaultCheckedboolean | undefined
    defaultValuestring | null | undefinedThe initial value of the checked radio when rendered. Use when you don't need to control the value of the radio group.
    autoFocusboolean | undefined
    idstringThe unique identifier of the machine.
    tabIndexnumber | undefined
    relstring | undefined
    onChangeChangeEventHandler<T, Element> | undefined
    disabledboolean | undefinedIf true, the radio group will be disabled
    namestring | undefinedThe name of the input fields in the radio (Useful for form submission).
    valuestring | null | undefinedThe controlled value of the radio group
    asChildboolean | undefinedUse the provided child element as the default rendered element, combining their props and behavior.
    idsElementIds | undefinedThe ids of the elements in the radio. Useful for composition.
    readOnlyboolean | undefinedWhether the radio group is read-only
    requiredboolean | undefinedIf true, the radio group is marked as required.
    invalidboolean | undefinedIf true, the radio group is marked as invalid.
    onValueChangecomplexFunction called once a radio is checked
    orientation"vertical" | "horizontal" | undefinedOrientation of the radio group
    variant{ default: string; card: string; }default

    RadioLabel

    PropTypeDefaultDescription
    titlestring | undefined
    defaultCheckedboolean | undefined
    defaultValuestring | number | readonly string[] | undefined
    autoFocusboolean | undefined
    idstring | undefined
    tabIndexnumber | undefined
    relstring | undefined
    onChangeChangeEventHandler<T, Element> | undefined
    asChildboolean | undefinedUse the provided child element as the default rendered element, combining their props and behavior.

    Explorer