RadioGroup

An accessible radio group rendered as a fieldset with a legend. Accepts an options array supporting labels, descriptions, and disabled states. Supports both vertical and horizontal layouts.

Import

tsx

import { RadioGroup } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

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?, disabled? }.
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

Basic

tsx

import { RadioGroup } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

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

tsx

import { RadioGroup } from 'https://git.cameronlow.com/cam/VelocityUI/packages'

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:

css

/* 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 */
/* construction  glass  soft  high-contrast  monochrome-red */

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