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

Form Control Attributes

Attributes and events apply to the native form field; ref gives you access to it. For the container, use wrapperAttributes and wrapperRef.

Component Props

Name	Type	Default	Description
`label`	`string`		The label displayed next to the radio button. Inside a `Label`, it is not rendered
`group` bindable	`unknown`		Bindable value representing a group of radio inputs that the input will be bound to.
`checked` bindable	`boolean` \| `null`	`false`	Whether the radio button is selected.
`ref` bindable	`HTMLInputElement` \| `null`		The DOM reference of the radio button element.
`wrapperAttributes`	`HTMLAttributes`		The attributes to spread on the wrapper element.
`wrapperRef` bindable	`HTMLDivElement` \| `null`		The DOM reference of the wrapper element.
Element Attributes (`input`)

Edit this Doc View as Markdown

Components