Checkbox

A binary control for selections, filters, and opt-in settings.

The Checkbox Component

Publish this article immediately

Send rollout reminders to the launch team

Require sign-off from compliance before launch

Basic Usage

Code Snippet

1<script lang="ts">2		import { Checkbox } from '$lib/components';3 4		let checked = $state(false);5	</script>6 7	<Checkbox bind:checked={checked} label="Email me weekly updates" />

Examples

States

Pair helper and error copy with disabled and unavailable states.

Available option

This preference is applied to every new project.

Locked preference

Only workspace owners can edit this setting.

Missing requirement

You need to confirm this before continuing.