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 "@riversidevalley/fluid";

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.

Current state: unchecked

<script>
	import { Checkbox } from "@riversidevalley/fluid";

	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.

I have a label!

<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

Name	Type	Default	Description
`checked`	`boolean`	`false`	Controls whether the checkbox is checked or not.
`indeterminate`	`boolean`	`false`	Controls whether the checkbox is in an indeterminate state.
`value`	`any`	`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.

This component uses $$restProps.

All unused props will be passed through to the underlying input element as regular attributes.

More Info

Slots

Name	Slot Props	Fallback
`Unnamed (Default)`	`{}`	Empty

Events

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

Dispatched Events

None