FMX Prototype Pipeline

Radio

Single-choice sibling of Checkbox. RadioGroup owns selection; checked fill is on-surface (not blue) so the two read as one family.

View in Figma

SMS

Push

<RadioGroup
  aria-label="Notify via"
  defaultValue="email"
  options={[
    { value: "email", label: "Email" },
    { value: "sms", label: "SMS" },
    { value: "push", label: "Push" },
  ]}
/>

Standard

Up to 5 buildings

Pro

Unlimited buildings

<RadioGroup
  aria-label="Plan"
  defaultValue="standard"
  options={[
    { value: "standard", label: "Standard", description: "Up to 5 buildings" },
    { value: "pro", label: "Pro", description: "Unlimited buildings" },
  ]}
/>

List

Grid

<RadioGroup
  aria-label="View"
  orientation="horizontal"
  defaultValue="list"
  options={[
    { value: "list", label: "List" },
    { value: "grid", label: "Grid" },
  ]}
/>

Option A

Option B

<RadioGroup
  aria-label="Disabled example"
  disabled
  defaultValue="a"
  options={[
    { value: "a", label: "Option A" },
    { value: "b", label: "Option B" },
  ]}
/>

Option A

Option B

<RadioGroup
  aria-label="Error example"
  error
  options={[
    { value: "a", label: "Option A" },
    { value: "b", label: "Option B" },
  ]}
/>

Props

value / defaultValue:string | null

Selected value (controlled / uncontrolled).

onChange:(value: string) => void

Called with the chosen value.

options:RadioGroupOption[]

Convenience option set. Alternatively pass <Radio> children.

orientation:"vertical" | "horizontal"= "vertical"

Stack or inline the radios.

error / disabled:boolean= false

Applies to every radio in the group.

Tokens