Checkbox

Edit This Page

Checkboxes represent a control that a user can select (check) or clear (uncheck). A Checkbox can also report its value as indeterminate.

import { Checkbox } from "fluent-svelte";

Usage

<Checkbox /> is a wrapper around HTML’s <input /> checkbox type. As such, the APIs share some similarities.

Checking and Unchecking

You can programmatically control if the checkbox is in it’s checked state by setting the checked property.

<Checkbox checked />

Additionally, you can use svelte’s two-way binding syntax to bind the checked state to a variable.

<script>
	import { Checkbox } from "fluent-svelte";

	let checked = false;
</script>

<Checkbox bind:checked />

Current state: {checked ? "checked" : "unchecked"}

Indeterminate States

If the checkbox cannot be represented as either checked or unchecked, it can be marked as indeterminate using the indeterminate property.

<Checkbox indeterminate />

Labels

Passing in content to the checkbox’s slot will cause that content to be rendered into a label for the control.

<Checkbox>I have a label!</Checkbox>

Value

For usage in forms, you can set a value property which will set the value of the Checkbox’s <input> element.

Disabled Checkboxes

If the checkbox is not meant to be clicked, you can use the disabled property to visually indicate this. If a checkbox is disabled, it will be unclickable.

Component API

API docs automatically generated by sveld and vite-plugin-sveld.

Props

NameTypeDefaultDescription
checked boolean false Controls whether the checkbox is checked or not.
indeterminate boolean false Controls whether the checkbox is in an indeterminate state.
value Unknown undefined Sets the input element's native `value` attribute for usage in forms.
disabled boolean false Controls whether the checkbox is intended for user interaction, and styles it accordingly.
inputElement null | HTMLInputElement null Obtains a bound DOM reference to the checkbox's <input /> element.
containerElement null | HTMLLabelElement null Obtains a bound DOM reference to the checkbox's outer container element.

Slots

NameSlot PropsFallback
Unnamed (Default) {} Empty

Events

All DOM events are forwarded to this component's respective elements by default. Learn More

Dispatched Events

None