Core UI

Radio

Radio buttons allow users to select a single option from a set of choices.

Installation

Import 
import { Radio } from '@svelte-atoms/core/radio';

Preset Configuration

Customize the radio appearance using presets

You can customize the default styles for Radio components by defining presets in your configuration:

Examples

Explore different radio variations

Basic Radio Group

Simple radio button group

Selected: option1

Code 
<script lang="ts">
  let selected = $state('option1');
</script>

<RadioGroup bind:value={selected}>
  <Radio value="option1">Option 1</Radio>
  <Radio value="option2">Option 2</Radio>
  <Radio value="option3">Option 3</Radio>
</RadioGroup>

Radio with Labels

Radio buttons with descriptive labels

Selected size: medium

Code 
<RadioGroup bind:value={size}>
  <Radio value="small" id="s1" />
  <Label for="s1">Small</Label>
</RadioGroup>

API Reference

RadioGroup Props

Prop
Type
Default
Description
value
T | undefined
undefined
The currently selected value
disabled
boolean | undefined
false
Whether all radio buttons in the group are disabled
required
boolean | undefined
false
Whether all radio buttons in the group are required
readonly
boolean | undefined
false
Whether all radio buttons in the group are readonly
name
string | undefined
''
The name attribute shared by all radio buttons in the group
children
Snippet<[]> | undefined
undefined
Child content (radio buttons)
oninput
((ev: CustomEvent<any>, options?: { value: T; } | undefined) => void) | undefined
undefined
Input event handler triggered when the selected value changes
...atomProps
HtmlAtomProps
-
All HTML element props are supported. See [Atom Props](/docs/components/atom#props) for the complete list of inherited properties.

Radio Props

Prop
Type
Default
Description
value
T | undefined
undefined
The value of the radio button
group
T | undefined
undefined
The currently selected value (for standalone radios)
id
string | undefined
''
The id attribute of the radio input
name
string | undefined
''
The name attribute of the radio input
disabled
boolean | undefined
false
Whether the radio button is disabled
required
boolean | undefined
false
Whether the radio button is required
readonly
boolean | undefined
false
Whether the radio button is readonly
checkedContent
Component<{}, {}, string> | Snippet<[]> | undefined
''
Custom content to display when the radio is checked
children
Snippet<[]> | undefined
undefined
Child content (label text)
onchange
((ev: Event, options?: { checked: boolean; value: boolean; type: "boolean"; } | undefined) => void) | undefined
false
Change event handler
oninput
((ev: Event, options?: { checked: boolean; value: boolean; type: "boolean"; } | undefined) => void) | undefined
false
Input event handler
...atomProps
HtmlAtomProps
-
All HTML element props are supported. See [Atom Props](/docs/components/atom#props) for the complete list of inherited properties.

Accessibility

Built-in Accessibility Features

  • • Use proper grouping with fieldset/legend
  • • Associate labels with radio buttons
  • • Keyboard navigation (Arrow keys)
  • • Clear visual focus indicators
  • • Screen reader friendly
Previous
Popover
Next
Scrollable