Svelte Component

Radio Groups

Capture feedback limited to a small set of options.

typescript 
import { RadioGroup, RadioItem } from '@skeletonlabs/skeleton';
Source Page Source WAI-ARIA

Demo

selected: 0

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

Variants

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

Vertical

Set flexDirection="flex-col" to utilize a vertical layout.

Full Width

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