base-ui-svelte
GitHub (opens in new tab)

Radio

A set of checkable buttons where only one can be checked at a time.

View as Markdown
Best apple

API Reference

Props mirror Base UI React where applicable, adapted for Svelte 5. Native HTML attributes for the rendered element are also accepted unless noted.

Radio.Root

Represents the radio button itself. Renders a <span> element and a hidden <input> beside.

Props

value string —
Name
value
Description

Controlled value.

Type
string
disabled boolean false
Name
disabled
Description

Whether the control ignores user interaction.

Type
boolean
Default
false
children snippet —
Name
children
Description

Content rendered inside the part.

Type
Snippet<[{ checked: boolean; disabled: boolean }]>

Data attributes

AttributeDescription
data-checkedPresent when the radio is checked.
data-disabledPresent when the radio is disabled.
data-uncheckedPresent when the radio is not checked.

Radio.Indicator

Indicates whether the radio button is selected. Renders a <span> element.

Props

children snippet —
Name
children
Description

Content rendered inside the part.

Type
Snippet

Data attributes

AttributeDescription
data-checkedPresent when the radio is checked.
data-disabledPresent when the radio is disabled.
data-uncheckedPresent when the radio is not checked.

RadioGroup

Extends div HTML attributes.

Props

value string —
Name
value
Description

Controlled value.

Type
string | undefined
defaultValue string —
Name
defaultValue
Description

Uncontrolled initial value.

Type
string
onValueChange function —
Name
onValueChange
Description

Event handler called when the value changes.

Type
((value: string, event: Event) => void) | undefined
disabled boolean false
Name
disabled
Description

Whether the control ignores user interaction.

Type
boolean
Default
false
name string —
Name
name
Description

—

Type
string | undefined
required boolean —
Name
required
Description

—

Type
boolean
children snippet —
Name
children
Description

Content rendered inside the part.

Type
Snippet<[{ value: string; disabled: boolean }]>

Data attributes

AttributeDescription
data-disabledPresent when the part is disabled.