Radio Groups

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

let alignment: string = 'horizontal';

<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.

<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.

<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.

<RadioItem ... required disabled />