@antadesign/anta
    Preparing search index...

    Interface RadioGroupPropsUnreviewed

    Public props for <RadioGroup> — the single-select container.

    interface RadioGroupProps {
        options: RadioOption[];
        value?: string;
        defaultValue?: string;
        onStateChange?: (event: StateChangeEvent, detail: StateDetail) => void;
        onChange?: (event: Event) => void;
        onValueChange?: (event: Event, attrs: RadioChangeAttrs) => void;
        onFocus?: (event: FocusEvent) => void;
        onBlur?: (event: FocusEvent) => void;
        name?: string;
        label?: string;
        hint?: string;
        status?: "neutral" | "brand" | "info" | "success" | "warning" | "critical";
        tone?:
            | "brand"
            | "neutral"
            | "info"
            | "success"
            | "warning"
            | "critical"
            | string & {};
        toneScope?: ToneScope;
        size?: "small"
        | "medium"
        | "large";
        disabled?: boolean;
        orientation?: "vertical" | "horizontal";
        className?: string;
        style?: CSSProperties;
        id?: string;
        title?: string;
        slot?: string;
        tabIndex?: number;
        key?: string | number | null;
        [key: `data-${string}`]: unknown;
        [key: `aria-${string}`]: unknown;
    }

    Hierarchy

    • Omit<BaseProps, "children" | "onChange">
      • RadioGroupProps

    Indexable

    • [key: `data-${string}`]: unknown
    • [key: `aria-${string}`]: unknown
    Index
    options value? defaultValue? onStateChange? onChange? onValueChange? onFocus? onBlur? name? label? hint? status? tone? toneScope? size? disabled? orientation? className? style? id? title? slot? tabIndex? key?
    options: RadioOption[]

    The options. The wrapper renders one <a-radio> per entry and computes its selected / roving tabindex / role declaratively.

    value?: string

    Controlled selected value. The group follows this prop and reports a requested change through onStateChange. Leave it undefined for uncontrolled use.

    defaultValue?: string

    Initial selected value for uncontrolled use.

    onStateChange?: (event: StateChangeEvent, detail: StateDetail) => void

    Fired whenever selection changes — event-first. detail is { next, prev, reason }: next/prev are values (null = nothing selected); reason is 'user' | 'reset' | 'restore'. A 'user' pick fires before applying and is cancelable — event.preventDefault() vetoes it (uncontrolled), or in controlled mode answer by updating value (reject by doing nothing). 'reset' (form reset) and 'restore' (bfcache / autofill) are not cancelable — filter on reason if you only track user picks.

    onChange?: (event: Event) => void

    Fired after the selection changes — a native change event (the post-apply counterpart to onStateChange). Not cancelable; for a controlled group it fires once you've updated value.

    onValueChange?: (event: Event, attrs: RadioChangeAttrs) => void

    Like onChange, but with a { value, name } snapshot as the second argument, matching Input.

    onFocus?: (event: FocusEvent) => void

    Fired when focus enters the group (any option) — wired to focusin, since focus lands on an individual option, not the group element itself.

    onBlur?: (event: FocusEvent) => void

    Fired when focus leaves the group entirely — wired to focusout.

    name?: string

    Form field name — the group submits one name=value (it's the form-associated element).

    label?: string

    Plain-text label for the whole group, rendered above the options.

    hint?: string

    Plain-text description for the group, rendered directly under label (above the options) — typically instructional copy. Per-option helper text goes on the option's own hint instead.

    status?: "neutral" | "brand" | "info" | "success" | "warning" | "critical"

    Validation/feedback tone for the group hint — recolors it (same tone set as Input's status). Use critical for an error message, etc.; omit for the neutral default.

    'neutral'
    tone?:
        | "brand"
        | "neutral"
        | "info"
        | "success"
        | "warning"
        | "critical"
        | string & {}

    Mark tone applied to every option (an option's own tone wins), or any literal CSS color for a one-off custom tone. In the default all scope it colors the selected-ring fill + dot and the unselected ring border. Named tones track light/dark mode. Set toneScope="selected" to tone only the selected option and leave the rest neutral. The option text stays neutral — recolor it in plain CSS via the --text-N-{tone} tokens.

    'neutral'
    toneScope?: ToneScope

    Apply tone to every state, or only to the selected option so unselected rings stay neutral. An option's own toneScope wins.

    'all'
    size?: "small" | "medium" | "large"

    Size applied to every option (an option's own size wins).

    'medium'
    disabled?: boolean

    Disable the whole group.

    orientation?: "vertical" | "horizontal"

    Layout + arrow-key axis.

    'vertical'
    className?: string

    CSS class on the component's root element (merged with the component's own classes). Use it directly for layout and positioning — grid/flex placement, margins, alignment — rather than wrapping the component in a <div>/<span>.

    style?: CSSProperties

    Inline styles on the component's root element. Set layout/positioning here (or via className) directly on the component instead of adding a wrapper.

    id?: string

    HTML id attribute.

    title?: string

    HTML title attribute — native browser tooltip on hover.

    slot?: string

    Assigns the element to a named <slot> of a parent web component (e.g. slot="header" inside a <Card>, slot="footer" inside a <Dialog>).

    tabIndex?: number

    Tab order. Set to -1 to skip the element when tabbing.

    key?: string | number | null

    React/Preact reconciliation key when rendered inside a list. Consumed by the JSX runtime (not forwarded as a DOM attribute).

    Settings
    Member Visibility

    On This Page
    Properties