Radio

Radio components are used to select one of multiple options. Because they have no useful purpose on their own, they are only intended to be used within a RadioGroup wrapper component.

Example

As mentioned above, a single radio button isn’t very useful – but here’s one anyway. The default color is --ui-focus.

<script>
  import { Radio } from '$lib/ui';
</script>

<Radio label="Your only option" />

Checked

Not normally used because the RadioGroup value prop will set which Radio is checked (and overrides this property).

<Radio label="Your choice is made" checked />

Label

A label prop let’s you define a string to be used as the radio label.

<Radio label="Choose wisely" />

Leading Label

Labels normally appear to the right of the radio. Use the leadingLabel prop instead to place it on the left.

<Radio leadingLabel="No going back" />

Disabled

Default is true but can also be assigned a Boolean value like disabled={user.isSignedIn}.

<Radio label="Not an option" disabled />

Value

This is the value that will be assigned to the RadioGroup’s value value when checked.

<Radio label="Spam me" value="spamMe" />

Label Named Slot

Since the label prop can only be a String, you can use the label slot instead to pass in a more complex label.

<Radio>
  <span slot="label">
    <PizzaIcon /> Pizza
  </span>
</Radio>

Leading Label Named Slot

Use the leadingLabel slot to pass in a more complex leading label that precedes the radio.

<Radio>
  <span slot="leadingLabel">
    <PizzaIcon /> Pizza
  </span>
</Radio>

Radio Component Props

Radio CSS Custom Properties

Radio Named Slots