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.

I have a label!

<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.

Option 1

<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.

Chocolate Vanilla Strawberry

<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.

I am checked by default.

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

Component API

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

Props

Name	Type	Default	Description
`group`	`any`	`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`	`any`	`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.

This component uses $$restProps.

All unused props will be passed through to the underlying input element as regular attributes.

More Info

Slots

Name	Slot Props	Fallback
`Unnamed (Default)`	`{}`	Empty

Events

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

Dispatched Events

None