Radio

An interactive element used to make a single choice from a set of options.

Code

<script lang="ts">
  import { Radio } from '@geoffcox/sterling-svelte';

  let selectedValue : string = $state('item-1');
</script>

<Radio bind:group={selectedValue} name="choices" value="item-1">Item 1</Radio>
<Radio bind:group={selectedValue} name="choices" value="item-2">Item 1</Radio>
<Radio bind:group={selectedValue} name="choices" value="item-3">Item 3</Radio>

Members

	Property Name	Type	Default	Comment
	group	any \| undefined \| null	undefined	The group to bind to the selected value for a group of radio buttons.

Considerations

Includes HTMLInputElement props, events, and methods.

Anatomy

<div class="sterling-radio">
  <div class="container">
    <input type="radio" />
    <div class="indicator"></div>
  </div>
  <label>
    {@render children()}
  </label>
</div>