Radio Button

Un radio button permite elegir una única opción entre un conjunto de alternativas mutuamente excluyentes. Agrupa varios radio buttons con un mismo name, o usa bind:group para enlazar el valor seleccionado a una variable.

Uso

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

<RadioButton label="Option 1" />

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

<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} />

Deshabilitado

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

Seleccionado

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

Propiedades del componente