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
value
string | undefined
''
Value
group
string[] | undefined
''
Group
checked
boolean | undefined
false
Checked
indeterminate
boolean | undefined
false
Indeterminate
checkedContent
Component<{}, {}, string> | Snippet<[]> | undefined
''
Checked Content
indeterminateContent
Component<{}, {}, string> | Snippet<[]> | undefined
''
Indeterminate Content
children
Snippet<[]> | undefined
undefined
Children
onclick
((ev?: Event | undefined) => void) | undefined
undefined
Onclick
onchange
((ev?: Event | undefined, options?: { checked: boolean; } | undefined) => void) | undefined
false
Onchange
...atomProps
HtmlAtomProps
-
All HTML element props are supported. See [Atom Props](/docs/components/atom#props) for the complete list of inherited properties.
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