RadioButton

Edit This Page

Radio buttons, also called option buttons, let users select one option from a collection of two or more mutually exclusive, but related, options. The singular behavior of a RadioButtons group distinguishes it from check boxes, which support multi-selection and deselection, or clearing.

import { RadioButton } from "fluent-svelte";

Usage

<RadioButton /> is a wrapper around HTML’s <input /> radio type. As such, the APIs share some similarities.

Labels

Passing in content to the RadioButton’s slot will cause that content to be rendered into a label for the control.

<RadioButton>I have a label!</RadioButton>

Value

The value property is used to determine the piece of data that is associated with the radio. This serves two primary purposes:

  • For usage in forms, this value is submitted with the form as FormData.
  • If a group binding is used, the radio’s value will be used to determine which radio in the group is currently selected.
<RadioButton value={1}>Option 1</RadioButton>

Radio Groups

Radio Buttons can be grouped together as a mutually-exclusive list of options using a group binding. Group bindings bind to a variable who’s value corresponds to the value property of the currently selected item.

<script>
    import { RadioButton } from "fluent-svelte";

    let flavor = "chocolate";
</script>

<RadioButton bind:group={flavor} value="chocolate">Chocolate</RadioButton>
<RadioButton bind:group={flavor} value="vanilla">Vanilla</RadioButton>
<RadioButton bind:group={flavor} value="strawberry">Strawberry</RadioButton>

When a RadioButton is selected, it will deselect all other RadioButtons in the same group, then set the bound variable to the selected item’s value property. If you do not wish to set a default option, the bound variable can simply be initialized without a value.

Manually Controlling State

If group is not set, you also have access to a checked property that allows you to manually set the initial state of the Radio.

<RadioButton checked>I am checked by default.</RadioButton>

Component API

API docs automatically generated by sveld and vite-plugin-sveld.

Props

NameTypeDefaultDescription
group Unknown undefined Bindable value representing a group of radio inputs that the input will be bound to.
checked boolean false Controls whether the radio is checked or not. Only valid is `group` is not bound.
value Unknown undefined Sets the input element's native `value` attribute for usage in forms.
disabled boolean false Controls whether the radio is intended for user interaction, and styles it accordingly.
inputElement null | HTMLInputElement null Obtains a bound DOM reference to the checkbox's <input /> element.
containerElement null | HTMLLabelElement null Obtains a bound DOM reference to the checkbox's outer container element.

Slots

NameSlot PropsFallback
Unnamed (Default) {} Empty

Events

All DOM events are forwarded to this component's respective elements by default. Learn More

Dispatched Events

None