logo-icon
STWUI

Radio

Radio buttons allow the user to select one option from a set.

Basic

svelte 
<script lang="ts">
	import { RadioGroup } from 'stwui';
</script>

<RadioGroup name="group-1">
   <RadioGroup.Radio value="radio-1">
      <RadioGroup.Radio.Label slot="label">Radio-1</RadioGroup.Radio.Label>
   </RadioGroup.Radio>
   <RadioGroup.Radio value="radio-2">
      <RadioGroup.Radio.Label slot="label">Radio-2</RadioGroup.Radio.Label>
   </RadioGroup.Radio>
   <RadioGroup.Radio value="radio-3">
      <RadioGroup.Radio.Label slot="label">Radio-3</RadioGroup.Radio.Label>
   </RadioGroup.Radio>
   <RadioGroup.Radio value="radio-4">
      <RadioGroup.Radio.Label slot="label">Radio-4</RadioGroup.Radio.Label>
   </RadioGroup.Radio>
</RadioGroup>
Group Label Inline with Description
Radio Group 2
| Radio-1 Description
| Radio-2 Description
| Radio-3 Description
| Radio-4 Description

svelte 
<script lang="ts">
	import { RadioGroup } from 'stwui';
</script>

<RadioGroup name="group-2" selected="radio-2">
   <RadioGroup.Label name="label">Radio Group 2</RadioGroup.Label>
   <RadioGroup.Radio value="radio-1">
      <RadioGroup.Radio.Label slot="label">Radio-1</RadioGroup.Radio.Label>
      <RadioGroup.Radio.Description slot="description">
         Radio-1 Description
      </RadioGroup.Radio.Description>
   </RadioGroup.Radio>
   <RadioGroup.Radio value="radio-2">
      <RadioGroup.Radio.Label slot="label">Radio-2</RadioGroup.Radio.Label>
      <RadioGroup.Radio.Description slot="description">
         Radio-2 Description
      </RadioGroup.Radio.Description>
   </RadioGroup.Radio>
   <RadioGroup.Radio value="radio-3">
      <RadioGroup.Radio.Label slot="label">Radio-3</RadioGroup.Radio.Label>
      <RadioGroup.Radio.Description slot="description">
         Radio-3 Description
      </RadioGroup.Radio.Description>
   </RadioGroup.Radio>
   <RadioGroup.Radio value="radio-4">
      <RadioGroup.Radio.Label slot="label">Radio-4</RadioGroup.Radio.Label>
      <RadioGroup.Radio.Description slot="description">
         Radio-4 Description
      </RadioGroup.Radio.Description>
   </RadioGroup.Radio>
</RadioGroup>
Pill

svelte 
<script lang="ts">
	import { RadioGroup } from 'stwui';
</script>

<RadioGroup name="group-3" type="pill">
   <RadioGroup.Radio value="radio-1">Radio-1</RadioGroup.Radio>
   <RadioGroup.Radio value="radio-2">Radio-2</RadioGroup.Radio>
   <RadioGroup.Radio value="radio-3">Radio-3</RadioGroup.Radio>
   <RadioGroup.Radio value="radio-4">Radio-4</RadioGroup.Radio>
</RadioGroup>
Pill with label and grid
Radio Group 4

svelte 
<script lang="ts">
	import { RadioGroup } from 'stwui';
</script>

<RadioGroup name="group-4" type="pill" class="grid-cols-2">
   <RadioGroup.Label slot="label">Radio Group 4</RadioGroup.Label>
   <RadioGroup.Radio value="radio-1">Radio-1</RadioGroup.Radio>
   <RadioGroup.Radio value="radio-2">Radio-2</RadioGroup.Radio>
   <RadioGroup.Radio value="radio-3">Radio-3</RadioGroup.Radio>
   <RadioGroup.Radio value="radio-4">Radio-4</RadioGroup.Radio>
</RadioGroup>

RadioGroup Props

name string
type 'default' | 'pill' default
selected string | undefined

RadioGroup Slots

label <RadioGroup.Label slot="label" />
default <RadioGroup.Radio />

RadioGroup.Label Slots

default

RadioGroup.Radio Props

id string | undefined
value string

RadioGroup.Radio Slots

label <RadioGroup.Radio.Label slot="label" />
description <RadioGroup.Radio.Description slot="description" />

RadioGroup.Radio.Label Slots

default

RadioGroup.Radio.Description Slots

default