Louisette 0.8.2

Checkbox

The checkbox component provides a way to select one or more options from a list of options.

Features

Indeterminate state

The checkbox component supports an indeterminate state.

The indeterminate state is used to indicate that some, but not all, of a group of related checkboxes are selected.

Disabled state

The checkbox component supports a disabled state.

Once disabled, the checkbox cannot be interacted with.

Keyboard navigation

  • Space toggles the checkbox

Example

Sources

+page.svelte

<script lang="ts">
  import Checkbox from './Checkbox.svelte'
</script>

<Checkbox>
  I want to receive news and special offers from the company and its partners.
</Checkbox>

Checkbox.svelte

<script lang="ts">
  import { Square, CheckSquare } from 'lucide-svelte'
  import { createCheckbox } from 'louisette'

  const { checkboxAttrs, checked } = createCheckbox()
</script>

<div
  {...$checkboxAttrs}
  class="flex cursor-pointer items-center gap-2 rounded-md p-2 transition-colors"
>
  <svelte:component
    this={$checked ? CheckSquare : Square}
    class="h-5 w-5 flex-shrink-0"
  />
  <span>
    <slot />
  </span>
</div>