Components

Radio groups

Card-style single-choice selection, built on React Aria. Six layouts - icon, icon card, avatar, payment icon, radio button, and checkbox - each driven by a typed items array, in two sizes.

Component Playground

Live instance - the controls read their options from the same config that drives the Types/Sizes sections below.

StarterFree1 user, community support.

Growth$29/moUp to 10 users, priority support.

Scale$99/moUnlimited users, dedicated support.

icon-simple · sm

Controls

Type

Size

Types

Six layouts, all driven by the same items/size/isDisabled shape - swap the component to change the card content, not the group behaviour.

Sizes

Two sizes - sm (default) and md - shown here on the icon-simple layout.

Small / Medium

StarterFree1 user, community support.

Growth$29/moUp to 10 users, priority support.

Scale$99/moUnlimited users, dedicated support.

sm

StarterFree1 user, community support.

Growth$29/moUp to 10 users, priority support.

Scale$99/moUnlimited users, dedicated support.

md

Disabled

isDisabled on the group dims and disables every card. Set disabled on a single item instead to disable just that option.

Group disabled

StarterFree1 user, community support.

Growth$29/moUp to 10 users, priority support.

Scale$99/moUnlimited users, dedicated support.

API

Every variant shares the same group-level props - only the shape of each items entry differs.

Common props

Prop	Type	Default
`items`	`ItemType[]`	`- (see item shape per type below)`
`size`	`"sm" \| "md"`	`"sm"`
`value`	`string`	`-`
`defaultValue`	`string`	`-`
`onChange`	`(value: string) => void`	`-`
`isDisabled`	`boolean`	`false`
`isRequired`	`boolean`	`false`
`name`	`string`	`-`
`className`	`string`	`-`

Icon simple - item shape

Field	Type
`value`	`string`
`title`	`string`
`secondaryTitle`	`string`
`description`	`string`
`icon`	`FC<{ className?: string }>`
`disabled`	`boolean`

Icon card - item shape

Field	Type
`value`	`string`
`title`	`string`
`description`	`string`
`secondaryTitle`	`string`
`price`	`string`
`badge`	`ReactNode`
`icon`	`FC<{ className?: string }>`
`disabled`	`boolean`

Avatar - item shape

Field	Type
`id`	`string`
`name`	`string`
`username`	`string`
`title`	`string`
`avatarUrl`	`string`
`disabled`	`boolean`

Payment icon - item shape

Field	Type
`value`	`string`
`title`	`string`
`description`	`string`
`logo`	`ReactNode`
`disabled`	`boolean`

Radio button - item shape

Field	Type
`value`	`string`
`title`	`string`
`secondaryTitle`	`string`
`description`	`string`
`icon`	`FC<{ className?: string }>`
`disabled`	`boolean`

icon is declared on this item type but never rendered by the component - same as Avatar's dead contrastBorder prop, documented here for accuracy rather than silently dropped.

Checkbox - item shape

Field	Type
`value`	`string`
`title`	`string`
`secondaryTitle`	`string`
`description`	`string`
`icon`	`FC<{ className?: string }>`
`disabled`	`boolean`

icon is declared on this item type but never rendered by the component - same as Avatar's dead contrastBorder prop, documented here for accuracy rather than silently dropped.

Usage

import { IconSimple } from "@/components/base/radio-groups/radio-groups";

<IconSimple
  aria-label="Plan"
  defaultValue="growth"
  items={[
    { value: "starter", title: "Starter", secondaryTitle: "Free", description: "1 user.", icon: Zap },
    { value: "growth", title: "Growth", secondaryTitle: "$29/mo", description: "Up to 10 users.", icon: Rocket02 },
  ]}
/>

Figma

No linked Figma file yet - this component was pulled in via the Untitled UI CLI, not designed in Figma first.