Checkbox

Checkbox Component

The Checkbox component renders a styled checkbox input with optional description, hint text, validation messages, and tooltip support. It allows customization of size and color variants and automatically handles required indicators.

Example Usage

<x-checkbox description="You must accept the terms" hint="Click to agree" color="danger" tooltip="Required field">
    Accept Terms and Conditions
</x-checkbox>

Props

• hint (string|null)
  Optional hint text displayed below the checkbox to provide additional information.

• showRequired (bool, default: true)
  Toggles the display of a red asterisk (*) when the checkbox is marked as required.

• showValidation (bool, default: true)
  Controls whether validation error messages are shown below the checkbox.

• description (string|null)
  Text displayed below the checkbox label, typically used for descriptions or explanations.

• uuid (string|null)
  Custom ID for the checkbox input; autogenerated if not provided to associate the label correctly.

• size (string, default: "md")
  Sets the checkbox size. Supported sizes: sm, md, lg, xl.

• color (string, default: "primary")
  Defines the checkbox color when checked. Options: primary, secondary, info, success, warning, danger.

• tooltip (string|null)
  Tooltip text displayed when hovering over the checkbox label.

Overview

This Checkbox component offers a fully accessible and customizable checkbox input styled with Tailwind CSS. It supports multiple sizes and color schemes, displays validation feedback, and optionally shows descriptions and hints to improve user guidance. The component uses Alpine.js to handle a unique ID for label-input binding and includes icon-based checkmark visuals.