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 wrapperAs="label">Default</Checkbox>Label
To display a visible label, set `wrapperAs="label"` and pass the label text as children. The wrapper then renders as a `<label>` element that wraps the input.
<Checkbox wrapperAs="label">I'm Labeled</Checkbox>
<Checkbox>I'm Unlabeled</Checkbox>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 | The DOM reference of the checkbox element. | |
wrapperAs | 'div' | 'label' | 'label' | The DOM element used to wrap the checkbox. `label` associates the children with the input; switch to `div` when the field is wrapped in a `<Label>` of its own. |
wrapperRef bindable | HTMLDivElement | HTMLLabelElement | The DOM reference of the checkbox wrapper element. | |
wrapperAttributes | PolymorphicProps | The attributes to spread on the wrapper element. | |
indeterminate bindable | boolean | 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 | Whether the checkbox is checked. | |
disabled | boolean | Disables the user interaction. | |
children | Snippet | The content of the label. Only rendered when wrapperAs is set to label. | |
HTMLInputAttributes without on:, children |