How do I group radio buttons?

Give them the same name to allow only one to be checked, or use bind:group to bind the selected value to a variable.

How do I read the selected radio value?

Bind a variable with bind:group={value}; it updates to the value of the selected radio button.

Radio Button

Documentation for the Radio Button component.

Option 1 Option 2 Option 3

Usage

<script>
	import { RadioButton } from 'fluentui-svelte';
</script>

<RadioButton label="Option 1" />

Component API

A brief explanation of the props that really need explaining. You can see the rest of the props in the Component Props section below.

Grouping

While you can use name="inputName" to group items and have only one checked, you can use bind:group=undefined to update that variable with the value of the selected input and inspect it in your console. Read More

View Code

Option 1 Option 2 Option 3

Disabled

The disabled prop can be used to disable a radio button, preventing user interaction.

Enabled Option Disabled Option

Checked

The checked prop allows you to control the checked state of the radio button. This is useful for controlled components.

Checked Option Unchecked Option

Component Props

Name	Type	Description
`label`	`string`	The label text for the radio button.
`group`	`unknown`	Bindable value representing a group of radio inputs that the input will be bound to.
`checked`	`boolean`	Indicates whether the radio button is checked.
`disabled`	`boolean`	Indicates whether the radio button is disabled.
`ref`	`HTMLInputElement`	Gets the DOM reference of the radio button element.
Element Attributes		All standard HTML attributes for input elements can be applied.