Radio Button

Example Usage

Select your milkshake flavor:

Selected flavor:

<script lang="ts">
  import { RadioButton } from "@fanny-pack-ui/svelte-kit";

  let flavors = ["Chocolate", "Caramel", "Oreo", "Peanut Butter Cup", "Vanilla"];
  let selectedFlavor = "";
</script>


<p>Select your milkshake flavor:</p>

{#each flavors as flavor}
  <div>
    <RadioButton 
      id={flavor}
      bind:group={selectedFlavor} 
      value={flavor} 
      marginBottom="var(--radio-default-margin-bottom)" 
      verticalAlignment="var(--radio-default-vertical-alignment)"
    />
  </div>
{/each}

<p>Selected flavor: {selectedFlavor}</p>

Things to note

• Plain HTML radio buttons are grouped by using the same name attribute. In Svelte, you group radio buttons together with the bind:group option.
• The <RadioButton> components will display inline by default. If you want them to display as block elements (i.e. stack on top of each other), then you will need to wrap them in a block element, like a <div>. To create space between stacked radio buttons you can either adjust the --radio-default-margin-bottom variable in your theme.css file or set a margin-bottom value on the <div> element that you use to wrap your <RadioButton> elements.

How to set a default selection and disable radio buttons

Select your milkshake size (we only have large available at the moment):

Selected size: large

<script lang="ts">
  import { RadioButton } from "@fanny-pack-ui/svelte-kit";

  let sizes = ["small", "medium", "large"];
  let selectedSize = "large";
</script>


<p>Select your milkshake size <em>(we only have large available at the moment)</em>:</p>

{#each sizes as size}
  <div>
    <RadioButton id={size} bind:group={selectedSize} value={size} disabled={size !== "large"} />
  </div>
{/each}

<p>Selected size: {selectedSize}</p>

Things to note

• The selected radio button will match the selectedSize variable. You can set the default selection by setting the variable that is bound to the group prop (e.g. selectedSize in the example above) to equal one of the options from the array that is used to loop over your radio buttons.
• The example above shows you how to disable radio buttons by passing a boolean or an expression that resolves to a boolean to the disabled prop.
• You can accidentally set a radio button to be both (1) disabled and (2) to be the default value that is selected, so make sure that you do not do that.

Props

Event Forwarding