Checkbox
The Checkbox component is a versatile UI element designed to provide a customizable checkbox experience. It offers a range of options including size, variant, and shape variations, allowing you to tailor it to your application's needs. The component supports essential props like label, checked, onChange, and disabled, ensuring smooth integration and functionality within your project. Additionally, the Checkbox can incorporate icons and is fully adaptable to different styles and states, making it a flexible choice for any form or selection-based interface.
Checkbox Checkbox
1<Checkbox onChange={() => {}} />Checkbox API Reference
Prop | Type | Default |
|---|---|---|
className | string | - |
label | string | - |
checked | boolean | false |
onChange | function | - |
variant | string | default |
size | string | default |
rounded | string | default |
disabled | boolean | false |
icon | React.ReactNode | - |
* Required | ||
Prop | Types |
|---|---|
rounded | default small large |
size | default small large |
variant | default secondary warning success info error |
Disabled Checkbox
1<Checkbox
2 onChange={() => {}}
3 disabled={true}
4/>Checkbox with Label
1<Checkbox
2 onChange={() => {}}
3 label="Checkbox with Label"
4/>Checkbox - Sizes
1<Checkbox onChange={() => {}} size="small" />
2<Checkbox onChange={() => {}} size="default" />
3<Checkbox onChange={() => {}} size="large" />Checkbox - Rounded Edges
1<Checkbox onChange={() => {}} rounded="none" />
2<Checkbox onChange={() => {}} rounded="default" />
3<Checkbox onChange={() => {}} rounded="full" />Checkbox - Icon Variant
1<Checkbox
2 onChange={() => {}}
3 icon={<ThumbsUp className="w-3 h-3 fill-white" />}
4/>Checkbox - Color Variants
1<Checkbox onChange={() => {}} variant="default" />
2<Checkbox onChange={() => {}} variant="success" />
3<Checkbox onChange={() => {}} variant="warning" />
4<Checkbox onChange={() => {}} variant="error" />
5<Checkbox onChange={() => {}} variant="info" />