Radio Groups

Svelte Component

Capture feedback limited to a small set of options.

Examples

selected: 0
selected: horizontal

Getting Started

This component acts as a wrapper around native HTML radio inputs. Bind the group, then set value and name as follows.

typescript
let alignment: string = 'horizontal';
html
<RadioGroup>
	<RadioItem bind:group={alignment} name="alignment-horizontal" value="horizontal">Horizontal</RadioItem>
	<RadioItem bind:group={alignment} name="alignment-vertical" value="vertical">Vertical</RadioItem>
</RadioGroup>

Variants

The radio group supports variant styles for active and hover properties.

html
<RadioGroup active="variant-filled-primary" hover="hover:variant-soft-primary">...</RadioGroup>

Full Width Display

Set display to flex to stretch and fill the full width.

html
<RadioGroup display="flex"></RadioGroup>

Radio Attributes

The Radio Item component supports Svelte's $$restProps, which allows for required, disabled, and any other valid radio input attributes. Please note these settings are applied per item.

html
<RadioItem ... required disabled />