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
The currently selected value
disabled
boolean
false
Whether all radio buttons in the group are disabled
required
boolean
false
Whether all radio buttons in the group are required
readonly
boolean
false
Whether all radio buttons in the group are readonly
name
string
''
The name attribute shared by all radio buttons in the group
children
Snippet<[]>
undefined
Child content (radio buttons)
bond
Bond
undefined
Bond object for component communication
base
Component | Snippet
undefined
Base component or snippet to render
preset
PresetModuleName | string
undefined
Preset module name for styling
variants
VariantDefinition | Function
undefined
Variant definition or function to resolve variants
class
ClassValue | ClassValue[]
undefined
CSS class(es) to apply to the element
as
string
undefined
HTML tag to render as
global
boolean
false
Whether to use global styles
initial
NodeFunction
undefined
Function called on initial render
enter
TransitionFunction
undefined
Transition function for entering
exit
TransitionFunction
undefined
Transition function for exiting
animate
NodeFunction
undefined
Animation function
onmount
NodeFunction
undefined
Function called when element is mounted
ondestroy
NodeFunction
undefined
Function called when element is destroyed

Radio Props

Prop
Type
Default
Description
value
T
undefined
The value of the radio button
group
T
undefined
The currently selected value (for standalone radios)
id
string
''
The id attribute of the radio input
name
string
''
The name attribute of the radio input
disabled
boolean
false
Whether the radio button is disabled
required
boolean
false
Whether the radio button is required
readonly
boolean
false
Whether the radio button is readonly
checkedContent
Component | Snippet
undefined
Custom content to display when the radio is checked
children
Snippet<[]>
undefined
Child content (label text)
onchange
(ev: Event, options?: { checked: boolean
false
Change event handler
bond
Bond
undefined
Bond object for component communication
base
Component | Snippet
undefined
Base component or snippet to render
preset
PresetModuleName | string
undefined
Preset module name for styling
variants
VariantDefinition | Function
undefined
Variant definition or function to resolve variants
class
ClassValue | ClassValue[]
undefined
CSS class(es) to apply to the element
as
string
undefined
HTML tag to render as
global
boolean
false
Whether to use global styles
initial
NodeFunction
undefined
Function called on initial render
enter
TransitionFunction
undefined
Transition function for entering
exit
TransitionFunction
undefined
Transition function for exiting
animate
NodeFunction
undefined
Animation function
onmount
NodeFunction
undefined
Function called when element is mounted
ondestroy
NodeFunction
undefined
Function called when element is destroyed

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