Skip to main content

Checkbox

Checkbox

Checkbox input for boolean selections and multiple choice options

Tags: component form selection

View Demo

Checkbox allows users to select one or more items from a set, or toggle a single option on/off.

Import​

<script>
  import { Checkbox } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

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

<Checkbox bind:checked />

Props​

Prop Type Default Description
checked boolean false Whether the checkbox is checked (bindable)
disabled boolean false Disables the checkbox
required boolean false Marks as required
name string - Name attribute for forms
value string - Value attribute for forms
id string - Element ID for label association
class string - Additional CSS classes
onCheckedChange (checked: boolean) => void - Callback when checked state changes
error string - Error message shown below the checkbox

With Label​

Always pair checkboxes with labels for accessibility:

<script>
  import { Checkbox, Label } from '@classic-homes/theme-svelte';

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

<div class="flex items-center gap-2">
  <Checkbox id="terms" bind:checked={accepted} />
  <Label for="terms">I accept the terms and conditions</Label>
</div>

States​

Checked​

<Checkbox checked />

Disabled​

<Checkbox disabled />
<Checkbox disabled checked />

Required​

<Checkbox required id="required-checkbox" />

Controlled Checkbox​

Use onCheckedChange for controlled behavior:

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

  function handleChange(newChecked: boolean) {
    // Perform validation or side effects
    if (newChecked) {
      console.log('Checkbox enabled');
    }
    checked = newChecked;
  }
</script>

<Checkbox {checked} onCheckedChange={handleChange} />

Checkbox Group​

Create a group of related checkboxes:

<script>
  import { Checkbox, Label } from '@classic-homes/theme-svelte';

  let selections = $state({
    email: false,
    sms: false,
    push: false,
  });
</script>

<fieldset class="space-y-3">
  <legend class="text-sm font-medium mb-2">Notification preferences</legend>

  <div class="flex items-center gap-2">
    <Checkbox id="email" bind:checked={selections.email} />
    <Label for="email">Email notifications</Label>
  </div>

  <div class="flex items-center gap-2">
    <Checkbox id="sms" bind:checked={selections.sms} />
    <Label for="sms">SMS notifications</Label>
  </div>

  <div class="flex items-center gap-2">
    <Checkbox id="push" bind:checked={selections.push} />
    <Label for="push">Push notifications</Label>
  </div>
</fieldset>

Touch Target​

The Checkbox component includes an expanded touch target (44x44px minimum) that extends beyond the visible checkbox, ensuring easy tapping on mobile devices.

Accessibility​

The Checkbox component includes:

  • Uses Bits UI Checkbox primitive for proper accessibility
  • Keyboard navigation (Space to toggle)
  • Expanded touch target (44x44px) for mobile
  • Works with <label> associations via id
  • Proper data-state attributes for styling
  • Screen reader compatible
Keyboard Navigation

Press Space to toggle a focused checkbox. Tab moves focus between checkboxes.

Examples​

Terms Agreement​

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

<div class="flex items-start gap-2">
  <Checkbox id="agree" bind:checked={agreed} class="mt-1" />
  <Label for="agree" class="leading-normal">
    I agree to the <a href="/terms" class="text-primary underline">Terms of Service</a>
    and <a href="/privacy" class="text-primary underline">Privacy Policy</a>
  </Label>
</div>

<Button disabled={!agreed}>Continue</Button>

Feature Selection​

<script>
  let features = $state(['basic']);

  function toggleFeature(feature: string) {
    if (features.includes(feature)) {
      features = features.filter((f) => f !== feature);
    } else {
      features = [...features, feature];
    }
  }
</script>

<div class="space-y-2">
  <div class="flex items-center gap-2">
    <Checkbox
      id="basic"
      checked={features.includes('basic')}
      onCheckedChange={() => toggleFeature('basic')}
    />
    <Label for="basic">Basic features</Label>
  </div>
  <div class="flex items-center gap-2">
    <Checkbox
      id="advanced"
      checked={features.includes('advanced')}
      onCheckedChange={() => toggleFeature('advanced')}
    />
    <Label for="advanced">Advanced features</Label>
  </div>
  <div class="flex items-center gap-2">
    <Checkbox
      id="premium"
      checked={features.includes('premium')}
      onCheckedChange={() => toggleFeature('premium')}
    />
    <Label for="premium">Premium features</Label>
  </div>
</div>

Form Submission​

<form onsubmit={handleSubmit}>
  <Checkbox name="newsletter" value="subscribed" />
  <button type="submit">Submit</button>
</form>
  • Switch - Toggle switch for on/off settings
  • RadioGroup - Single selection from options
  • Label - Label for form inputs
On this page