Radio group

Installation#

pnpm dlx shadcn@latest add @zui/radio-group

The CLI writes components/ui/radio-group.tsx, installs Utils, and adds @rn-primitives/radio-group.

Usage#

import { useState } from 'react';

import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';

const [plan, setPlan] = useState('monthly');

<RadioGroup value={plan} onValueChange={setPlan}>
  <RadioGroupItem value="monthly" aria-label="Monthly" />
  <RadioGroupItem value="yearly" aria-label="Yearly" />
</RadioGroup>;

API reference#

RadioGroup#

Takes every prop of the @rn-primitives/radio-group root.

The group is controlled. Pressing an item calls onValueChange with the item's value, and the item draws as selected once value follows. disabled disables every item.

RadioGroupItem#

Takes every prop of the @rn-primitives/radio-group item, plus:

The item is announced as a radio with its checked and disabled state, and drawn as a dotted circle while selected. A disabled item, or any item of a disabled group, is dimmed and ignores presses. aria-invalid draws the destructive border while the item is not selected. React Native does not announce it, so carry the error in accessibilityHint or in a Text the user can reach.

Name an item with aria-label, which iOS and Android both read. Android also reads a Label's nativeID through aria-labelledby; iOS ignores that prop.