RadioGroup

Clear choices, from simple radio lists to full selectable cards with icons, descriptions, and pricing. Native keyboard and form behavior included.

View source Installation

Preview

ROOM TO GROW

Find your starting point.

A choice should feel clear before you make it.

Choose your workspace

PersonalA home for your side projects.Free / foreverTeamBuild together, from first draft to launch.$12 / person, monthlyStudioMore space for your growing practice.$29 / person, monthly

Delivery preference

Daily digestWeekly summaryNo email

Import

import { RadioGroup } from '@velocityuikit/velocityui'

Props

Prop	Type	Default	Description
name	`string`	—	Shared name attribute for the radio inputs.
label	`string`	—	Group label rendered as a <legend>.
options	`RadioOption[]`	—	Array of { value, label, description?, icon?, meta?, disabled? }. Icons and metadata should be non-interactive content.
variant	`'default' \| 'cards'`	`'default'`	Render simple radio options or selectable cards with a full clickable surface.
value	`string`	—	Controlled selected value.
defaultValue	`string`	—	Uncontrolled default selected value.
onChange	`(value: string) => void`	—	Callback fired when selection changes.
orientation	`'vertical' \| 'horizontal'`	`'vertical'`	Layout direction of the radio options.
size	`'sm' \| 'md' \| 'lg'`	`'md'`	Controls radio and label size.
error	`string`	—	Error message for the entire group.

Examples

Selectable cards

The whole card selects the native radio. Arrow keys and form submission continue to work without extra handlers.

import { RadioGroup } from '@velocityuikit/velocityui'

export default function Plans() {
  return <RadioGroup
    name="plan"
    label="Choose your workspace"
    variant="cards"
    defaultValue="team"
    options={[
      { value: 'personal', label: 'Personal', description: 'For side projects', meta: 'Free' },
      { value: 'team', label: 'Team', description: 'Build together', meta: '$12 / month' },
    ]}
  />
}

Basic

import { RadioGroup } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <RadioGroup
      name="plan"
      label="Select a plan"
      defaultValue="pro"
      options={[
        { value: 'free', label: 'Free', description: 'Up to 3 projects' },
        { value: 'pro', label: 'Pro', description: 'Unlimited projects' },
        { value: 'enterprise', label: 'Enterprise', description: 'Custom pricing' },
      ]}
    />
  )
}

Horizontal

import { RadioGroup } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <RadioGroup
      name="size"
      label="T-shirt size"
      orientation="horizontal"
      options={[
        { value: 's', label: 'S' },
        { value: 'm', label: 'M' },
        { value: 'l', label: 'L' },
        { value: 'xl', label: 'XL' },
      ]}
    />
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  dark-cyan  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */