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.

Option 1

Option 2

Option 3

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={someVariable} para actualizar esa variable con el valor de la entrada seleccionada e inspeccionarla en tu consola. Leer más

Ver Código

<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

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

Atributos de los controles de formulario

Los atributos y eventos se aplican al campo nativo del formulario; ref permite acceder a él. Para el contenedor, usa wrapperAttributes y wrapperRef.

Propiedades del componente

Name	Type	Default	Description
`label`	`string`		La etiqueta que se muestra junto al radio button. Dentro de un `Label`, no se renderiza
`group` bindable	`unknown`		Valor enlazable que representa un grupo de entradas de tipo radio al que se vinculará la entrada.
`checked` bindable	`boolean` \| `null`	`false`	Si el radio button está seleccionado.
`ref` bindable	`HTMLInputElement` \| `null`		La referencia del DOM del elemento radio button.
`wrapperAttributes`	`HTMLAttributes`		Los atributos que se aplican al elemento wrapper.
`wrapperRef` bindable	`HTMLDivElement` \| `null`		La referencia DOM del elemento contenedor.
Element Attributes (`input`)

Editar este documento Ver como Markdown

Componentes