Forms
Checkbox
The checkbox component allows users to select one or more options by ticking a square box, available in various styles, sizes, colors, and variants.
Basic example
Default
Basic checkbox example.
Label and helper text
Please use `label-text` for the label and `helper-text` for the text that appears at the bottom as helper text.
Color
Semantic colors
Apply a semantic color to the checkbox by using the `checkbox-{semantic-color}` modifier class together with the `checkbox` component class.
Custom colors
To create custom checkboxes, you can use Tailwind CSS utilities like `bg-*`, `text-*` (for the tick), and `border-*` to style both the checked and unchecked states. With the `--input-color` value, you can easily modify the background and border color when the checkbox is checked. However, this will not affect the tick color, which by default uses the `neutral-content` text color. If you want to change the tick color, you will need to update the text color specifically for the checked state by using the `checked:text-*` utility.
Size
Checkbox sizes
Add responsive class `checkbox-{size}` where `{size} = xs|sm|md|lg|xl` for checkbox of different sizes.
Validation states
Success state
Success state can be show using `is-valid` class.
Error state
Error state can be show using `is-invalid` class.
Illustrations
Disabled
Prevent user interaction with the checkbox by adding the `disabled` attribute to make it non-selectable.
Inline checkbox group
A group of checkbox components.
Vertical checkbox group
A vertical group of checkbox components.
Checkbox in dropdown
Below example shows a checkbox in dropdown.
Checkbox list group
This example can be used to show a list of checkbox buttons inside a grouped list.
Select your favorite language:
Horizontal list group
Use this example to group up checkbox button components inside a list.
Select your favorite language:
Custom options
Basic checkbox
The `custom-option` component is a flexible element with an associated label and background color, which can include text, icons, or images. It allows customization for layout, appearance, and interaction, providing various ways to enhance option designs.
Hidden checkbox button
Utilize the `hidden` utility class to conceal the checkbox button.
Basic label checkbox
The `custom-soft-option` component is a flexible element that includes a background color, which becomes active when the option is selected. It can be used with any form of input, providing a visually distinct way to highlight the selected option.
Iconic custom checkbox
Customize the checkbox styling using utility classes according to your preferences, as illustrated below.
Image as checkbox
This example displays an image as a checkbox button.
Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
checkbox | component | Component class for checkbox. |
custom-option | component | For custom option container. |
custom-soft-option | component | For custom option container with background. |
label-text | part | Base class for title label text. |
helper-text | part | Base class for helper label text. |
checkbox-primary | color | Adds 'primary' color to checkbox. |
checkbox-secondary | color | Adds 'secondary' color to checkbox. |
checkbox-accent | color | Adds 'accent' color to checkbox. |
checkbox-info | color | Adds 'info' color to checkbox. |
checkbox-success | color | Adds 'success' color to checkbox. |
checkbox-warning | color | Adds 'warning' color to checkbox. |
checkbox-error | color | Adds 'error' color to checkbox. |
is-valid | state | Adds success style to the input. |
is-invalid | state | Adds error style to the input. |
checkbox-xs | size | Checkbox with extra small size. |
checkbox-sm | size | Checkbox with small size. |
checkbox-md | size | Checkbox with medium(default) size. |
checkbox-lg | size | Checkbox with large size. |
checkbox-xl | size | Checkbox with extra large size. |