Radio

The Radio component is a form control that allows users to select a single option from a list of choices. It is typically used within a RadioGroup component to manage the selection state of multiple radio buttons.

Features

• Customizable size variants
• Support for disabled and error states
• Accessible with ARIA attributes
• Keyboard and mouse operable
• Error message display
• Required field indication

Basic Usage

Single Radio

<script>
  import Radio from '$lib/components/Radio/Radio.svelte';
</script>

<Radio label="Single Radio" />

Radio Group

Use RadioGroup to manage a set of radio buttons, ensuring only one option can be selected at a time.

<script>
  import RadioGroup from '$lib/components/Radio/RadioGroup.svelte';
  
  let selectedFruit = '';
  const fruitOptions = [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'orange', label: 'Orange' }
  ];
</script>

<RadioGroup
  bind:value={selectedFruit}
  name="fruits"
  label="Choose your favorite fruit"
  options={fruitOptions}
/>

Props

Radio

Prop	Type	Default	Description
checked	boolean	false	Whether the radio is checked.
label	string	''	The label text for the radio.
disabled	boolean	false	Disables the radio.
required	boolean	false	Makes the radio required.
name	string	''	Name attribute for the radio input.
value	string	''	Value for the radio input.
size	'sm' \| 'md' \| 'lg'	'md'	Size of the radio.
error	string	''	Error message to display.
ariaLabel	string	''	ARIA label for accessibility.

RadioGroup

Prop	Type	Default	Description
label	string	''	Group label text.
name	string	''	Name attribute for the radio inputs.
value	string	''	Selected value (bindable).
orientation	'horizontal' \| 'vertical'	'vertical'	Layout direction.
size	'sm' \| 'md' \| 'lg'	'md'	Size of the radio buttons.
required	boolean	false	Makes the selection required.
disabled	boolean	false	Disables all radio buttons.
error	string	''	Error message to display.
options	Array<{value: string, label: string, disabled?: boolean}>	[]	Radio options.

Accessibility

• Each radio uses proper ARIA attributes for accessibility
• Groups use role="radiogroup" with appropriate ARIA attributes
• Error messages are associated with inputs using aria-describedby
• Required fields are marked with aria-required
• Fully keyboard accessible

Example: With Error State

<RadioGroup
  name="error-example"
  label="Select an option"
  options={fruitOptions}
  error="Please select an option"
  required
/>

Example: Disabled State

<RadioGroup
  name="disabled-example"
  label="Disabled options"
  options={fruitOptions}
  disabled
/>

Example: Horizontal Layout

<RadioGroup
  name="horizontal-example"
  label="Horizontal layout"
  options={fruitOptions}
  orientation="horizontal"
/>