Foundations
Components
- Accordion
- Alert Dialog
- Avatar
- Badge
- Banner
- BreadcrumbSOON
- Button
- Button Group
- Calendar
- Callout
- Card
- Checkbox
- CodeblockSOON
- Color PickerNEW
- Container
- Control Group
- Dialog
- Divider
- Dropdown
- File UploaderNEW
- Flex
- FormSOON
- Grid
- IconSOON
- ImageSOON
- Input
- LinkNEW
- List
- MenuSOON
- PaginationSOON
- Popover
- Progress
- Radio
- Section
- Select
- Skeleton
- SliderSOON
- SpinnerSOON
- Switch
- Table
- Tabs
- Tag
- Textarea
- ToastSOON
- Tooltip
Checkbox
Our Checkbox makes option selection a cakewalk. One or many, pick what you fancy!
Example
1import { Checkbox, Flex } from '@haktos/sugarcoat-ui';23<Flex gap='3' justify='center'>4 <Checkbox label='Check me' />5</Flex>6
API Reference
| 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. |
Component Properties
Checkbox
| Prop | Type | Default | Explanation |
|---|---|---|---|
size | string | md | The size of the checkbox component. |
color | string | default | The color variant of Checkbox components. |
checked | boolean | false | Checkbox's state |
label | string | - | Text to be used as Label alongside Checkbox |
onCheckedChange | function | - | Callback function that is called when check state changes. |
radius | string | sm | The radius of the Checkbox |
shadow | string | none | The shadow of the Checkbox |