base-ui-svelte

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

Extends button HTML attributes.

PropertyTypeDefaultDescription
valuestringControlled value.
disabledbooleanfalseWhether the control ignores user interaction.
childrenSnippet<[{ checked: boolean; disabled: boolean }]>Content rendered inside the part.
Data attributeDescription
data-checkedPresent when the part is checked.
data-disabledPresent when the part is disabled.
data-uncheckedPresent when the part is unchecked.

Radio.Indicator

Extends span HTML attributes.

PropertyTypeDefaultDescription
childrenSnippetContent rendered inside the part.
Data attributeDescription
data-checkedPresent when the part is checked.
data-disabledPresent when the part is disabled.
data-uncheckedPresent when the part is unchecked.

RadioGroup

Extends div HTML attributes.

PropertyTypeDefaultDescription
valuestring | undefinedControlled value.
defaultValuestringUncontrolled initial value.
onValueChange((value: string, event: Event) => void) | undefinedEvent handler called when the value changes.
disabledbooleanfalseWhether the control ignores user interaction.
namestring | undefined
requiredboolean
childrenSnippet<[{ value: string; disabled: boolean }]>Content rendered inside the part.
Data attributeDescription
data-disabledPresent when the part is disabled.