Checkbox

Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.

You can modify some settings to make the checkbox Indeterminate, overriding its appearance and maintaining it until set to false, regardless of user interaction.

• checkbox: Checkbox wrapper, it handles alignment, placement, and general appearance.
• icon-wrapper: The icon wrapper which wraps the icon.
• icon: Icon within the checkbox, controlling size, visibility, and changes when checked required when using custom icon.
• label: The text associated with the checkbox.

You can customize the Checkbox component by passing custom Tailwind CSS classes to the component slots.

Checkbox has the following attributes on the base element:

• data-invalid: When the checkbox is invalid.
• data-disabled: When the checkbox is disabled.
• data-required: Whether user checkbox is required on the checkbox before form submission.
• data-line-through: Whether the label should be crossed out.
• data-disable-animation: Whether to disable the animation.

• Built with a native HTML <input> element.
• Full support for browser features like form autofill.
• Keyboard focus management and cross browser normalization.
• Keyboard event support for Tab and Space keys.
• Labeling support for assistive technology.
• Indeterminate state support.