How do I add a visible label to a Checkbox?

Set wrapperAs="label" and pass the label text as children; the wrapper then renders as a that wraps the input.

How do I show an indeterminate Checkbox?

Set the indeterminate prop, which is useful for representing a mixed selection across a group.

Checkbox

Representa un control que un usuario puede seleccionar (marcar) o limpiar (desmarcar). Un CheckBox también puede reportar su valor como indeterminado.

Uso

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

<Checkbox wrapperAs="label">Default</Checkbox>

API del componente

Una breve explicación de las propiedades que realmente necesitan explicación. Puedes ver el resto de las propiedades aquí.

Etiqueta

Para mostrar una etiqueta visible, establece `wrapperAs="label"` y pasa el texto de la etiqueta como children. El wrapper se renderiza entonces como un elemento `<label>` que envuelve la entrada.

View Code

FluentUI Checkbox Another Checkbox

Marcado

La propiedad `checked` determina si el checkbox está marcado o no. Acepta un valor booleano.

View Code

Unchecked Checked

Indeterminado

La propiedad `indeterminate` establece el checkbox en un estado indeterminado, lo cual es útil para representar una selección mixta.

View Code

Indeterminate

Deshabilitado

La propiedad `disabled` deshabilita el checkbox, evitando la interacción del usuario. Acepta un valor booleano.

View Code

Disabled Checked & Disabled

Valor

La propiedad `value` establece el valor de la entrada del checkbox. Es útil cuando el checkbox forma parte del envío de un formulario.

View Code

Checkbox with Value

Propiedades de Checkbox

Name	Type	Description
`wrapperAs`	`'div' \\| 'label'`	El elemento como el que se renderiza el wrapper. Establécelo en `label` para mostrar una etiqueta visible. El valor predeterminado es `div`.
`children`	`Snippet`	Contenido de la etiqueta renderizado junto a la entrada. Solo se permite cuando `wrapperAs="label"`.
`checked`	`boolean`	Determina si el checkbox está marcado.
`indeterminate`	`boolean`	Establece el checkbox en un estado indeterminado.
`disabled`	`boolean`	Deshabilita el checkbox, evitando la interacción del usuario.
`value`	`string`	El valor de la entrada del checkbox, útil para envíos de formularios.
`wrapperAttributes`	`object`	Atributos adicionales para el elemento wrapper.
`ref`	bindable `HTMLInputElement`	La referencia DOM del elemento de entrada del checkbox.
`wrapperRef`	bindable `HTMLDivElement \\| HTMLLabelElement`	La referencia DOM del elemento wrapper del checkbox.
Input Attributes		Atributos adicionales para el elemento de entrada del checkbox.