Alert Avatar AvatarGroup Button ButtonGroup Checkbox CheckboxGroup FilePicker Form FormRow Hamburger Input Modal Option Radio RadioGroup Rating Select Spinner Textarea Toast Tooltip Toggle

RadioGroup

Use a RadioGroup to group multiple Radio components for a predictable layout and the ability to two-way bind a value value coupled to which radio button is value. Additionally, you can set a scheme or color as a single property to be inherited by all child Radios.

Example

Use bind:value to two-bind the reactive value of the value item.

<script>
  import { RadioGroup, Radio } from '$lib/ui';
  let make = $state();
</script>

<RadioGroup bind:value={make}>
  <Radio label="Ford" value="ford" />
  <Radio label="Dodge" value="dodge" />
  <Radio label="Tesla" value="tesla" />
</RadioGroup>

<p>Make: {make}</p>

Ford Dodge Tesla

Make:

Legend

Use the label prop to set a label for the RadioGroup. This will be rendered as a <label> element and will be styled like the label elements on other form components.

<RadioGroup label="Dominant Hand">
  <Radio label="Left" value="left" />
  <Radio label="Right" value="right" />
</RadioGroup>

Dominant Hand Left Right

Name

If a name prop is set on the RadioGroup, it will be inherited by all child Radio components. This is useful for grouping Radio components together in a form.

<RadioGroup label="Dominant Hand" name="hand">
  <Radio label="Left" value="left" />
  <Radio label="Right" value="right" />
</RadioGroup>

Dominant Hand Left Right

Legend Named Slot

Instead of using the label prop which can only be a String, a label named slot can be used for a label with more complex content.

<RadioGroup bind:value={cocktail}>
  <label slot="label"><CocktailIcon /> Cocktails</label>
  <Radio label="Martini" value="m" />
  <Radio label="Gimlet" value="g" />
</RadioGroup>

Cocktails Martini Gimlet

RadioGroup Component Props

Name	Type	Description
`bind:value`	Array	Two-way binded array of value items
`label`	String	Text label appears before radio
`name`	String	The `name` property to be inherited by all child radio components
`class`	String	CSS classes declared in global scope can be applied to the outermost element
`...`		Additional props will be passed through to the HTML element enabling support for things like `on:click`, etc

To style a RadioGroup, use Radio CSS Style Props like --ui-radio-border-color. These can be passed to the RadioGroup and will be inherited by child Radios.

RadioGroup Named Slots

Name	Description
`label`	Content to be used for label before RadioGroup (supercedes `label` property)