Checkbox

Our Checkbox makes option selection a cakewalk. One or many, pick what you fancy!

Check me

1import { Checkbox, FlexBox } from '@sugarcoat/ui'
2
3<FlexBox gap='3' justify='center'>
4  <Checkbox label='Check me' />
5</FlexBox>
6

Component	Description
Checkbox	The decision maker. The small clickable box that lets users toggle between choices, perfect for when you need to pick any number of options from a set.

Prop	Type	Default	Explanation
`size`	`string`	sm	The size of the checkbox.
`color`	`string`	default	The color theme of the checkbox.
`radius`	`string`	default	The border radius of the checkbox.
`shadow`	`string`	none	The shadow depth of the checkbox.
`checked`	`boolean`	false	The checked state of the checkbox.
`label`	`string`	-	The label text for the checkbox.
`onChange`	`(checked: boolean) => void`	-	Callback function when the checked state changes.

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius