Skip to main content

RadioGroup

RadioGroup

Radio button group for single selection from multiple options

Tags: component form selection

View Demo

RadioGroup allows users to select a single option from a list of mutually exclusive choices.

Import​

<script>
  import { RadioGroup } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<script>
  let value = $state('');

  const options = [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
  ];
</script>

<RadioGroup {options} bind:value />

Props​

Prop Type Default Description
value string '' Current selected value (bindable)
options RadioOption[] Required Array of radio options
label string - Group label
hint string - Hint text below the radio group
orientation 'horizontal' | 'vertical' 'vertical' Layout direction
disabled boolean false Disables all options
required boolean false Marks as required
name string - Name attribute for forms (auto-generated if empty)
error string - Error message to display
class string - Additional CSS classes
onValueChange (value: string) => void - Callback when value changes

Types​

interface RadioOption {
  value: string;
  label: string;
  disabled?: boolean;
  description?: string;
}

With Label and Hint​

<RadioGroup
  label="Select an option"
  hint="Choose the option that best fits your needs"
  {options}
  bind:value
/>

With Descriptions​

Provide additional context for each option:

<script>
  const plans = [
    {
      value: 'free',
      label: 'Free',
      description: 'Basic features for individuals',
    },
    {
      value: 'pro',
      label: 'Pro',
      description: 'Advanced features for professionals',
    },
    {
      value: 'enterprise',
      label: 'Enterprise',
      description: 'Full access for large teams',
    },
  ];
</script>

<RadioGroup
  label="Select a plan"
  hint="You can upgrade or downgrade at any time"
  options={plans}
  bind:value
/>

Orientation​

Vertical (Default)​

<RadioGroup {options} bind:value orientation="vertical" />

Horizontal​

<RadioGroup {options} bind:value orientation="horizontal" />

Disabled Options​

Disable specific options:

<script>
  const options = [
    { value: 'available', label: 'Available' },
    { value: 'unavailable', label: 'Unavailable', disabled: true },
    { value: 'coming-soon', label: 'Coming Soon', disabled: true },
  ];
</script>

<RadioGroup {options} bind:value />

Or disable the entire group:

<RadioGroup {options} bind:value disabled />

Validation​

Show validation errors:

<RadioGroup
  label="Select a size"
  {options}
  bind:value
  required
  error={!value ? 'Please select a size' : ''}
/>

Accessibility​

The RadioGroup component includes:

  • Proper ARIA role and attributes
  • Keyboard navigation (Arrow keys)
  • Expanded touch targets (44x44px)
  • Visible focus indicators
  • Screen reader announcements
  • Auto-generated IDs link labels to inputs
  • aria-describedby connects hint and error messages
  • aria-invalid set when error is present

:::note Keyboard Navigation

  • Arrow Up/Down or Arrow Left/Right to navigate
  • Space to select
  • Options are automatically focused when navigating :::

Examples​

Shipping Method​

<script>
  let shipping = $state('');

  const shippingOptions = [
    {
      value: 'standard',
      label: 'Standard',
      description: '5-7 business days - Free',
    },
    {
      value: 'express',
      label: 'Express',
      description: '2-3 business days - $9.99',
    },
    {
      value: 'overnight',
      label: 'Overnight',
      description: 'Next business day - $24.99',
    },
  ];
</script>

<RadioGroup
  label="Shipping Method"
  hint="Free shipping on orders over $50"
  name="shipping"
  options={shippingOptions}
  bind:value={shipping}
  required
/>

Payment Method​

<RadioGroup
  label="Payment Method"
  name="payment"
  options={[
    { value: 'card', label: 'Credit Card' },
    { value: 'paypal', label: 'PayPal' },
    { value: 'bank', label: 'Bank Transfer' },
  ]}
  bind:value={payment}
  orientation="horizontal"
/>

Yes/No Question​

<RadioGroup
  label="Would you recommend this product?"
  name="recommend"
  options={[
    { value: 'yes', label: 'Yes' },
    { value: 'no', label: 'No' },
  ]}
  bind:value={recommend}
  orientation="horizontal"
/>

Survey Scale​

<RadioGroup
  label="How satisfied are you?"
  hint="1 = Very Dissatisfied, 5 = Very Satisfied"
  name="satisfaction"
  options={[
    { value: '1', label: 'Very Dissatisfied' },
    { value: '2', label: 'Dissatisfied' },
    { value: '3', label: 'Neutral' },
    { value: '4', label: 'Satisfied' },
    { value: '5', label: 'Very Satisfied' },
  ]}
  bind:value={satisfaction}
/>
On this page