Checkbox
Represents a control that a user can select (check) or clear (uncheck). A CheckBox can also report its value as indeterminate.
Usage
<script>
import { Checkbox } from 'fluentui-svelte';
</script>
<Checkbox>Default</Checkbox>Label
Pass the label text as children. The root is a <div>, and the text renders in a separate <label> associated with the checkbox through for and id. Inside a Label, it is not rendered: the Label names the checkbox.
<Checkbox>I'm Labeled</Checkbox>
<Checkbox aria-label="Without visible text" />Indeterminate
The indeterminate prop sets the checkbox to an indeterminate state, which is useful for representing a mixed selection.
Disabled
The disabled prop disables the checkbox, preventing user interaction. It accepts a boolean value.
Checkbox Props
| Name | Type | Default | Description |
|---|---|---|---|
ref bindable | HTMLInputElement | null | The DOM reference of the checkbox element. | |
wrapperRef bindable | HTMLDivElement | null | The DOM reference of the checkbox wrapper element. | |
wrapperAttributes | HTMLAttributes | The attributes to spread on the wrapper element. | |
indeterminate bindable | boolean | null | Renders the checkbox in its mixed state, neither checked nor unchecked. | |
name | string | null | id | The name submitted with the form. Falls back to the id of the checkbox. |
group | string | null | The value of the group of checkboxes this input belongs to. | |
checked bindable | boolean | null | Whether the checkbox is checked. | |
disabled | boolean | Disables the user interaction. | |
children | Snippet | The content of the label associated with the checkbox. Inside a Label, it is not rendered | |
HTMLInputAttributes without on:, children |