Radio Button

A radio button lets someone choose a single option from a set of mutually exclusive choices. Group several radio buttons with a shared name, or use bind:group to bind the selected value to a variable.

Option 1 Option 2 Option 3

Usage

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

<RadioButton label="Option 1" />

Grouping

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

View Code

<script>
  import { RadioButton } from 'fluentui-svelte';
  let groupValue = $state('');
</script>

<RadioButton label="Option 1" name="group1" value="$1" bind:group={groupValue} />
<RadioButton label="Option 2" name="group1" value="$2" bind:group={groupValue} />
<RadioButton label="Option 3" name="group1" value="$3" disabled bind:group={groupValue} />

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	Default	Description
`label`	`string`		The label displayed next to the radio button.
`group` bindable	`unknown`		Bindable value representing a group of radio inputs that the input will be bound to.
`checked` bindable	`boolean`	`false`	Whether the radio button is selected.
`ref` bindable	`HTMLInputElement`		The DOM reference of the radio button element.
`labelAttributes`	`PolymorphicProps`		The attributes to spread on the label wrapping the radio button.
Element Attributes (`input`)