Studio
2

Checkbox

Installation

pnpm dlx @mielui/svelte add checkbox

Usage

Native input attributes such as name, value, required, form, id, and aria-describedby are forwarded to the checkbox input. The visible label names the checkbox; description text is linked separately and does not become part of its name. Explicit aria-label or aria-labelledby naming takes priority. Description IDs are deduplicated and conditional descriptions are linked only while rendered.

import { Checkbox } from '$lib/mielui/components/checkbox';

let checked = $state();

<Checkbox bind:checked label="Accept" />

Examples

Sizes

Use size="sm", "md", or "lg" for a 14, 18, or 22px box. Medium is the default. The label remains clickable at every size.

Label only

With description

Disabled

Checked

API reference

Checkbox

Selects or clears a boolean value.

Prop Type Default
checked Bindable boolean | undefined false
label string | undefined —
description string | undefined —
disabled boolean | undefined —
variant "primary" | "default" | undefined 'default'
size "sm" | "md" | "lg" | undefined 'md'
onCheckedChange ((checked: boolean) => void) | undefined —
class (string & (ClassValue | null)) | undefined —
children Snippet<[]> | undefined —