RadioGroup

Radio group based on react-aria-components.

import { RadioGroup } from "@evolve-storefront/ui/radio-group";

Preview

DefaultOpen in Storybook ↗

Usage

A required choice with one option disabled. invalid marks the group without a reason; usually the enclosing form's validation sets it, not a caller by hand.

<RadioGroup name="deliveryMethod" defaultValue="standard">
  <RadioGroupLabel>{t("delivery")}</RadioGroupLabel>
  <RadioGroupItem value="standard">
    <RadioGroupIndicator />
    {t("standard")}
  </RadioGroupItem>
  <RadioGroupItem value="express">
    <RadioGroupIndicator />
    {t("express")}
  </RadioGroupItem>
</RadioGroup>;

Props

Prop	Type	Description
name?	string
value?	string | null	null keeps the group controlled with nothing chosen yet.
defaultValue?	string
onValueChange?	((value: string) => void)	Hands over the selected value, so it cannot be onChange.
disabled?	boolean
required?	boolean
readOnly?	boolean
invalid?	boolean

Any other props go to the root element, like on a plain HTML element.

Change the layout

Pass children to RadioGroup to arrange its parts yourself. Every part is exported from @evolve-storefront/ui/radio-group.

<RadioGroup name="deliveryMethod" defaultValue="standard">
  <RadioGroupLabel>{t("delivery")}</RadioGroupLabel>
  <RadioGroupItem value="standard">
    <RadioGroupIndicator />
    {t("standard")}
  </RadioGroupItem>
  <RadioGroupItem value="express">
    <RadioGroupIndicator />
    {t("express")}
  </RadioGroupItem>
</RadioGroup>;

RadioGroupIndicatorThe visual radio dot.

No props of its own.

RadioGroupItemA single selectable radio option.

Prop	Type	Description
value	string
data-component?	undefined	Not a caller's to rename — see controlProps.
disabled?	boolean

Any other props go to the root element, like on a plain HTML element.

RadioGroupLabelLabel for the group as a whole (uses the RAC-linked label).

No props of its own.