Radio

An <input type='radio'>: an interactive element to choose a single value from a set of choices

Code

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

  let selectedValue : string;
</script>

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

Members

	Property Name	Type	Default	Comment
	group	string	''	The group to bind to the selected value for a group of radio buttons
	variant	string	''	Additional class names to apply

Considerations

Includes HTMLInputElement props, event, and methods

Anatomy

<div class="sterling-radio">
  <div class="container">
    <!-- hidden -->
    <input />
    <div class="indicator" />
  </div>
  <label>
    <slot {checked} {disabled} {group} {inputId} {value} {variant} />
  </label>
</div>