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

Documentación del componente Radio Button.

Option 1 Option 2 Option 3

Uso

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

<RadioButton label="Option 1" />

API del componente

Una breve explicación de las props que realmente necesitan aclaración. Puedes ver el resto de las props en la sección Propiedades del componente más abajo.

Agrupación

Aunque puedes usar name="inputName" para agrupar elementos y permitir que solo uno esté seleccionado, también puedes usar bind:group=undefined para actualizar esa variable con el valor de la entrada seleccionada e inspeccionarla en tu consola. Leer más

View Code

Option 1 Option 2 Option 3

Deshabilitado

La prop disabled puede usarse para deshabilitar un radio button, evitando la interacción del usuario.

Enabled Option Disabled Option

Seleccionado

La prop checked te permite controlar el estado seleccionado del radio button. Esto es útil para componentes controlados.

Checked Option Unchecked Option

Propiedades del componente

Name	Type	Description
`label`	`string`	El texto de la etiqueta del radio button.
`group`	`unknown`	Valor enlazable que representa un grupo de entradas de tipo radio al que se vinculará la entrada.
`checked`	`boolean`	Indica si el radio button está seleccionado.
`disabled`	`boolean`	Indica si el radio button está deshabilitado.
`ref`	`HTMLInputElement`	Obtiene la referencia del DOM del elemento radio button.
Element Attributes		Se pueden aplicar todos los atributos HTML estándar para elementos input.