Radio Card

Single-select card control. Extends Radio Group into clickable panels with label, description, and optional icon.

Automated

Provide FCA registration and we'll fetch everything

Manual input

Type business details and registration numbers

<RadioCardGroup className="max-w-lg grid-cols-2" defaultValue="automated">  <RadioCard value="automated">    <RadioCardContent>      <RadioCardLabel>Automated</RadioCardLabel>      <RadioCardDescription>        Provide FCA registration and we'll fetch everything      </RadioCardDescription>    </RadioCardContent>    <RadioCardIndicator />  </RadioCard>  <RadioCard value="manual">    <RadioCardContent>      <RadioCardLabel>Manual input</RadioCardLabel>      <RadioCardDescription>        Type business details and registration numbers      </RadioCardDescription>    </RadioCardContent>    <RadioCardIndicator />  </RadioCard></RadioCardGroup>

Usage

import {
  RadioCard,
  RadioCardContent,
  RadioCardDescription,
  RadioCardGroup,
  RadioCardIndicator,
  RadioCardLabel,
} from "@reva/ui";

Wrap cards in RadioCardGroup for single-select state. Each RadioCard requires a value prop. The group wraps Radix RadioGroup.Root and accepts the same props (defaultValue, value, onValueChange, name).

Composition

Use the following composition to build a RadioCard :

RadioCardGroup
  RadioCard
    RadioCardIcon
    RadioCardContent
      RadioCardLabel
      RadioCardDescription
    RadioCardIndicator

Examples

With icons

Allow

This user can always access the system

Deny

This user will be denied access to the system

Lock

This user will be locked out of the system

<RadioCardGroup className="max-w-2xl grid-cols-3" defaultValue="allow">  <RadioCard value="allow">    <RadioCardContent>      <RadioCardIcon>        <ShieldCheck />      </RadioCardIcon>      <RadioCardLabel>Allow</RadioCardLabel>      <RadioCardDescription>        This user can always access the system      </RadioCardDescription>    </RadioCardContent>    <RadioCardIndicator />  </RadioCard>  <RadioCard value="deny">    <RadioCardContent>      <RadioCardIcon>        <Prohibit />      </RadioCardIcon>      <RadioCardLabel>Deny</RadioCardLabel>      <RadioCardDescription>        This user will be denied access to the system      </RadioCardDescription>    </RadioCardContent>    <RadioCardIndicator />  </RadioCard>  <RadioCard value="lock">    <RadioCardContent>      <RadioCardIcon>        <Lock />      </RadioCardIcon>      <RadioCardLabel>Lock</RadioCardLabel>      <RadioCardDescription>        This user will be locked out of the system      </RadioCardDescription>    </RadioCardContent>    <RadioCardIndicator />  </RadioCard></RadioCardGroup>

Minimal (label only)

Next.js

Vite

Astro

<RadioCardGroup className="max-w-2xl grid-cols-3" defaultValue="next">  <RadioCard value="next">    <RadioCardContent>      <RadioCardLabel>Next.js</RadioCardLabel>    </RadioCardContent>    <RadioCardIndicator />  </RadioCard>  <RadioCard value="vite">    <RadioCardContent>      <RadioCardLabel>Vite</RadioCardLabel>    </RadioCardContent>    <RadioCardIndicator />  </RadioCard>  <RadioCard value="astro">    <RadioCardContent>      <RadioCardLabel>Astro</RadioCardLabel>    </RadioCardContent>    <RadioCardIndicator />  </RadioCard></RadioCardGroup>

No indicator (tile-picker)

Pass className="sr-only" to RadioCardIndicator for a tile-picker look. The radio control is still rendered (and remains keyboard-accessible) but hidden from view; the selected card is distinguished by the primary border.

Next.js

Vite

Astro

<RadioCardGroup className="max-w-2xl grid-cols-3" defaultValue="next">  <RadioCard value="next">    <RadioCardContent>      <RadioCardLabel>Next.js</RadioCardLabel>    </RadioCardContent>    <RadioCardIndicator className="sr-only" />  </RadioCard>  <RadioCard value="vite">    <RadioCardContent>      <RadioCardLabel>Vite</RadioCardLabel>    </RadioCardContent>    <RadioCardIndicator className="sr-only" />  </RadioCard>  <RadioCard value="astro">    <RadioCardContent>      <RadioCardLabel>Astro</RadioCardLabel>    </RadioCardContent>    <RadioCardIndicator className="sr-only" />  </RadioCard></RadioCardGroup>

Props

RadioCardGroup

Forwards to Radix RadioGroup.Root. See Radix UI Radio Group.

Prop	Type	Default	Description
`defaultValue`	`string`	—	Initial selected value.
`value`	`string`	—	Controlled selected value.
`onValueChange`	`(value: string) => void`	—	Called when selection changes.
`disabled`	`boolean`	—	Disables all cards in the group.
`name`	`string`	—	Form field name.

RadioCard

Forwards to Radix RadioGroup.Item.

Prop	Type	Default	Description
`value`	`string`	—	Required. Identifies this card within the group.
`disabled`	`boolean`	—	Disables this card.

Password strength meter

Presentational four-segment strength indicator with a right-aligned label. Pair with your own password policy or zxcvbn-style scoring in app code.

Radio Group

Single selection from a set of options. Built on the Radix UI Radio Group primitive.

Radio Card

On this page