logo

Steeze UI

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 #

PropertyTypeDefault
name
String null
value
String[] null
label String null
orientation GroupOrientation 'horizontal'

Styling - CheckboxGroup #

NameDefaultNotes
--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 #

PropertyTypeDefault
label String null
name String null
value String null
group
String[] null

Styling - Checkbox #

NameDefault
--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
MIT Licensed