Radio group

Usage

<script lang="ts">
  import { RadioGroup, Radio, RadioField } from '$lib/components/radio-group';
  import { Label } from '$lib/components/fieldset';
 
  let selectedPlan = 'personal';
</script>

<RadioGroup value={selectedPlan}>
  <RadioField>
    <Radio value="personal" id="personal" />
    <Label for="personal">Personal plan</Label>
  </RadioField>
  <RadioField>
    <Radio value="team" id="team" />
    <Label for="team">Team plan</Label>
  </RadioField>
  <RadioField>
    <Radio value="enterprise" id="enterprise" />
    <Label for="enterprise">Enterprise plan</Label>
  </RadioField>
</RadioGroup>

Properties

The RadioGroup component extends the Bits UI <RadioGroup> component. Find the full list of available properties in the official Bits UI documentation.

RadioGroup

Examples

Description

Use the description component inside the RadioField to add a description to the radio item.

Sublabel

Use the sublabel component inside the RadioField to add a sublabel to the radio item.

Reversed

Place the Radio last in the RadioField component to make the radio appear on the right side of the label.

Orientation

Use the orientation property to change the orientation of the RadioGroup component.

Error

Use the error property to add an error state to the RadioGroup component.

Disabled

Use the disabled property to disable the RadioGroup component.

Disabled item

Use the disabled property on individual Radio components to disable specific radio items.