ComponentsCheckbox
Checkbox
A customizable checkbox component with label positioning options
The Checkbox component provides a customizable checkbox input with various styling options and label positioning.
Tip!
Use the circle and color props to customize the appearance of the checkbox.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional classes to apply to the checkbox |
| id | string | - | Unique identifier for the checkbox |
| name | string | - | Name attribute for the checkbox |
| label | string | - | Label text for the checkbox |
| helperText | string | - | Helper text to display below the checkbox |
| checked | boolean | false | Whether the checkbox is checked |
| onChange | function | - | Function to handle checkbox state changes |
| labelPosition | 'left' | 'right' | 'right' | Position of the label relative to the checkbox |
| color | string | 'primary' | Color scheme of the checkbox |
| disabled | boolean | false | Whether the checkbox is disabled |
| circle | boolean | false | Whether to make the checkbox circular |
Tip!
Use the color prop to change the color of the checkbox
(primary, purple, red, etc).
Info
Use the labelPosition prop to control the layout of your checkbox and label.
Usage Examples
Basic Checkbox
Checkbox with Left Label
Circular Checkbox with Custom Color
Checkbox with Helper Text
Keep me logged in
Disabled Checkbox
Tip!
You can customize the appearance of the Checkbox component by passing additional classes or props.