Checkbox
Selection control for multiple choices. Allows users to select one or more options from a set.
Installation
Import
import { Checkbox } from '@svelte-atoms/core/checkbox';Preset Configuration
Customize the checkbox appearance using presets
You can customize the default styles for Checkbox components by defining presets in your configuration:
Examples
Explore different checkbox variations and use cases
Basic Checkbox
Simple checkbox with label
Code
<script lang="ts">
import { Checkbox } from '@svelte-atoms/core/checkbox';
</script>
<Checkbox id="basic" />
<label for="basic">Accept terms and conditions</label>Checkbox Group
Multiple checkboxes for selecting multiple options
Code
<div class="space-y-3">
<div class="flex items-center space-x-2">
<Checkbox id="option1" />
<label for="option1">Newsletter updates</label>
</div>
<div class="flex items-center space-x-2">
<Checkbox id="option2" />
<label for="option2">Marketing emails</label>
</div>
<div class="flex items-center space-x-2">
<Checkbox id="option3" />
<label for="option3">Product announcements</label>
</div>
</div>Disabled State
Checkbox in disabled state
Code
<Checkbox id="disabled" disabled /> <label for="disabled">Disabled checkbox</label>
API Reference
Prop
Type
Default
Description
id
string
-
Unique identifier for the checkbox
checked
boolean
false
Whether the checkbox is checked
disabled
boolean
false
Whether the checkbox is disabled
class
string
''
Additional CSS classes to apply
onchange
function
-
Change event handler
Accessibility
Built-in Accessibility Features
- • Proper semantic input element with type="checkbox"
- • Keyboard navigation support (Space key to toggle)
- • Focus management with visible focus indicators
- • Screen reader compatible with proper labels
- • Disabled state handling with aria-disabled
- • Associated label support for larger click targets