Checkbox
Form Input
Binary input with a checkmark
Quickstart #
<script>
import { CheckboxGroup, Checkbox } from "@steeze-ui/components"
let group = ["option 1", "option 2"]
let single = ["option 3"]
</script>
<CheckboxGroup label="Group" bind:value={group} >
<RadioButton label="Option 1" value="option 1" />
<RadioButton label="Option 2" value="option 2" />
</CheckboxGroup>
<Checkbox label="Single" value="option 3" bind:group={single} />
API Reference - CheckboxGroup #
Property | Type | Default |
---|---|---|
name
|
String
|
null
|
value
|
String[]
|
null
|
label
|
String
|
null
|
orientation
|
GroupOrientation
|
'horizontal'
|
Styling - CheckboxGroup #
Name | Default | Notes |
---|---|---|
--st-checkbox-gap
|
0.25rem
|
The gap between label and items |
--st-checkbox-items-horizontal-gap
|
0.75rem
|
The gap between RadioButton's when horizontal |
--st-checkbox-items-vertical-gap
|
0.5rem
|
The gap between RadioButton's when vertical |
API Reference - Checkbox #
Property | Type | Default |
---|---|---|
label
|
String
|
null
|
name
|
String
|
null
|
value
|
String
|
null
|
group
|
String[]
|
null
|
Styling - Checkbox #
Name | Default |
---|---|
--st-checkbox-label-font-size
|
--st-font-size-base
|
--st-checkbox-label-font-weight
|
--st-font-weight-normal
|
--st-checkbox-label-color
|
--st-body-text-color
|
--st-checkbox-indicator-size
|
--st-box-size
|
--st-checkbox-indicator-bg-color
|
--st-box-bg-color
|
--st-checkbox-indicator-border-color
|
--st-box-border-color
|
--st-checkbox-indicator-border-radius
|
--border-radius-full
|
--st-checkbox-indicator-selected-bg-color
|
--st-colors-light1
|
--st-checkbox-indicator-selected-bg-color
|
--st-box-selected-bg-color
|