Forms

RadioGroup

A set of radio buttons for selecting a single option from a list. Supports colors, sizes, horizontal and vertical layouts, item descriptions, and loading state.

Playground

Experiment with different props in real-time.

Starter

Standard

Premium

Color

Size

Orientation

Basic Usage

Pass an array of items and bind to the selected value.

Starter

Standard

Premium

<script lang="ts">
  import { RadioGroup } from 'sv5ui';

  let plan = $state('standard');

  const plans = [
    { value: 'starter', label: 'Starter' },
    { value: 'standard', label: 'Standard' },
    { value: 'premium', label: 'Premium' }
  ];
</script>

<RadioGroup items={plans} bind:value={plan} />

With Descriptions

Add a description field to each item for additional context.

Express

Delivered within 1-2 business days

Standard

Delivered within 3-5 business days

Economy

Delivered within 7-10 business days

<script lang="ts">
  import { RadioGroup } from 'sv5ui';

  let delivery = $state('standard');

  const options = [
    { value: 'express', label: 'Express', description: 'Delivered within 1-2 business days' },
    { value: 'standard', label: 'Standard', description: 'Delivered within 3-5 business days' },
    { value: 'economy', label: 'Economy', description: 'Delivered within 7-10 business days' }
  ];
</script>

<RadioGroup items={options} bind:value={delivery} />

Horizontal

Set orientation="horizontal" for an inline layout.

Starter

Standard

Premium

<RadioGroup items={plans} bind:value={plan} orientation="horizontal" />

Sizes

5 sizes from extra small to extra large.

Starter

Standard

Premium

Starter

Standard

Premium

Starter

Standard

Premium

Starter

Standard

Premium

Starter

Standard

Premium

<RadioGroup items={plans} bind:value={plan} size="xs" />
<RadioGroup items={plans} bind:value={plan} size="sm" />
<RadioGroup items={plans} bind:value={plan} size="md" />
<RadioGroup items={plans} bind:value={plan} size="lg" />
<RadioGroup items={plans} bind:value={plan} size="xl" />

Colors

Semantic color schemes for the radio indicators.

Primary

Starter

Standard

Premium

Secondary

Starter

Standard

Premium

Success

Starter

Standard

Premium

Error

Starter

Standard

Premium

<RadioGroup items={plans} bind:value={plan} color="primary" />
<RadioGroup items={plans} bind:value={plan} color="secondary" />
<RadioGroup items={plans} bind:value={plan} color="success" />
<RadioGroup items={plans} bind:value={plan} color="error" />

With Legend

Use the legend prop to add an accessible fieldset legend.

Choose your plan

Starter

Standard

Premium

<RadioGroup
  items={plans}
  bind:value={plan}
  legend="Choose your plan"
  required
/>

Disabled Items

Set disabled on individual items to prevent selection.

Free

Pro

Enterprise

<script lang="ts">
  import { RadioGroup } from 'sv5ui';

  let tier = $state('free');

  const tiers = [
    { value: 'free', label: 'Free' },
    { value: 'pro', label: 'Pro' },
    { value: 'enterprise', label: 'Enterprise', disabled: true }
  ];
</script>

<RadioGroup items={tiers} bind:value={tier} />

Loading

Show a skeleton loading state while data is being fetched.

Starter

Standard

Premium

<RadioGroup items={plans} bind:value={plan} loading />

UI Slots

Use the ui prop to override classes on specific internal elements.

Slot	Description
`root`	Outermost wrapper element
`fieldset`	Fieldset element wrapping the group
`legend`	Legend element for the fieldset
`item`	Each radio item row
`container`	Wrapper around the radio indicator
`base`	The radio circle element
`indicator`	The inner dot indicator when selected
`loadingIcon`	Loading spinner icon
`label`	Label text for each item
`description`	Description text below each label
`wrapper`	Wrapper around the label and description

Snippets

Use snippets to customize legend, label, and description rendering.

Snippet	Args	Description
`legendSlot`	`{ legend }`	Custom legend rendering
`labelSlot`	`{ item }`	Custom label rendering for each item
`descriptionSlot`	`{ item }`	Custom description rendering for each item

Props

Prop	Type	Default	Description
`value`	`string`	`''`	Currently selected value (bindable)
`onValueChange`	`(value: string) => void`	`-`	Callback fired when the selected value changes
`items`	`RadioGroupItem[]`	`[]`	Array of radio options to render
`color`	`Color`	`'primary'`	Color scheme for the radio indicators
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Size of the radio items
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	Layout direction of the radio items
`legend`	`string`	`-`	Accessible legend text for the fieldset
`loading`	`boolean`	`false`	Show loading skeleton state
`loadingIcon`	`string`	`icons.loading`	Custom icon for the loading spinner
`disabled`	`boolean`	`false`	Disable all radio items
`required`	`boolean`	`false`	Mark the group as required
`loop`	`boolean`	`true`	Enable keyboard navigation looping
`id`	`string`	`-`	HTML id attribute
`name`	`string`	`-`	HTML name attribute for form submission
`class`	`string`	`-`	Additional CSS classes
`ui`	`Record<Slot, Class>`	`-`	Override slot classes

Item Props

Each object in the items array accepts these properties.

Prop	Type	Default	Description
`value`	`string`	`-`	Unique value for this radio item (required)
`label`	`string`	`-`	Display label for the radio item
`description`	`string`	`-`	Additional description text below the label
`disabled`	`boolean`	`false`	Disable this specific radio item

Input Select