mielui
Inputs

Checkbox

A checkbox with a dash indicator, bindable checked state, optional label, and description.

Installation

pnpm dlx @mielui/svelte add checkbox

Usage

Input attributes such as name, value, required, form, id, and aria-describedby reach the native checkbox. label names the checkbox and description is linked as its description. An explicit aria-label or aria-labelledby takes priority over label. Set aria-invalid to mark an unchecked box as invalid.

<script lang="ts">
    import { Checkbox } from '@mielui/svelte/components/checkbox';

    let checked = $state(false);
</script>

<Checkbox bind:checked label="Email me about product updates" />

Examples

Launch checklist

A list of tasks with a count of the ones that are done.

Sizes

size takes sm, md, or lg for a 14, 18, or 22px box. md is the default. The label stays clickable at every size.

Label only

With description

Disabled

Checked

Events and the card variant

onCheckedChange runs with the new state each time the box is ticked or cleared, for when you want to react without binding checked. variant="card" sets the checkbox in a card row whose edge strengthens when ticked, which helps a single important checkbox stand out.

API reference

Checkbox

Selects or clears a boolean value.

  • checked Bindable
    boolean

    Whether it is checked. Bind it to control the state from outside.

    Default false

  • label
    string

    Visible label linked to the control.

  • description
    string

    Supporting text under the label, announced with the control.

  • disabled
    boolean

    Prevents interaction and dims the control.

  • variant
    "default" | "card"

    card frames the box and its text as a bordered row.

    Default 'default'

  • size
    "sm" | "md" | "lg"

    Size of the box.

    Default 'md'

  • onCheckedChange
    ((checked: boolean) => void)

    Called with the new state when it changes.

  • class
    (string & (ClassValue | null))

    Classes added to the element.

  • children
    Snippet<[]>

    Content rendered inside.