Form

Radio

Radio button group. RadioGroup manages the shared name, value and WAI-ARIA keyboard navigation; each Radio renders one clickable, labelled option.

Import

import { Radio, RadioGroup } from "@zephora/react";

Examples

Basic

MonthlyYearlyLifetime

<RadioGroup defaultValue="monthly" aria-label="Billing period">
  <Radio value="monthly">Monthly</Radio>
  <Radio value="yearly">Yearly</Radio>
  <Radio value="lifetime" disabled>Lifetime</Radio>
</RadioGroup>

Horizontal, controlled

StandardExpress

Selected: standard

const [shipping, setShipping] = React.useState("standard");

<RadioGroup
  orientation="horizontal"
  value={shipping}
  onValueChange={setShipping}
  aria-label="Shipping"
>
  <Radio value="standard">Standard</Radio>
  <Radio value="express">Express</Radio>
</RadioGroup>
<p>Selected: {shipping}</p>

Sizes

SmallMediumLarge

<RadioGroup defaultValue="md" aria-label="Sizes">
  <Radio value="sm" size="sm">Small</Radio>
  <Radio value="md" size="md">Medium</Radio>
  <Radio value="lg" size="lg">Large</Radio>
</RadioGroup>

API

RadioGroup props

Prop	Type	Default	Description
`value`	`string`	—	Controlled selected value.
`defaultValue`	`string`	—	Initial selected value (uncontrolled).
`onValueChange`	`(value: string) => void`	—	Called with the newly selected value.
`name`	`string`	—	Shared radio name; auto-generated when omitted.
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	Layout direction (also sets aria-orientation).
`disabled`	`boolean`	`false`	Disables every radio in the group.
`unstyled`	`boolean`	`false`	Headless mode — drops Zephora classes so your own CSS can style it.
`…rest`	`HTMLAttributes<HTMLDivElement>`	—	Forwarded to the radiogroup element; provide aria-label or aria-labelledby.

Radio props

Prop	Type	Default	Description
`value` *	`string`	—	The value this radio represents inside its group.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Control size.
`children`	`ReactNode`	—	Label content; the label wraps the input so it is clickable.
`unstyled`	`boolean`	`false`	Headless mode — drops Zephora classes so your own CSS can style it.
`…rest`	`InputHTMLAttributes<HTMLInputElement>`	—	Remaining native input props are forwarded (name, checked and value are managed).

Keyboard

Key	Action
`Arrow Down / Arrow Right`	Selects and focuses the next radio (wraps).
`Arrow Up / Arrow Left`	Selects and focuses the previous radio (wraps).
`Space`	Selects the focused radio.
`Tab`	Moves focus into / out of the group.