Checkbox

A form input component that provides a checkbox interface with support for checked state, indeterminate state, and optional icon display.

Basic Checkbox

Creates a standard checkbox with a label.

Preview Code
php
Options
The Checkbox component supports various configuration options.
  • checked: Whether the checkbox is checked (default: false)
  • indeterminate: Whether the checkbox is in an indeterminate state (default: false)
  • value: The value of the checkbox when checked
  • disabled: Whether the checkbox is disabled
  • required: Whether the checkbox is required
  • readonly: Whether the checkbox is readonly
  • name: The name of the checkbox
  • form: The form ID the checkbox belongs to
Checkbox Examples
Here are examples of different ways to use the checkbox component.

Checked Checkbox

Creates a pre-checked checkbox.

Preview Code
php

Checkbox with Value

Creates a checkbox with a specific value when checked.

Preview Code
php

Checkbox with Icon

Creates a checkbox with an icon display.

Preview Code
php

Full-featured Checkbox

Creates a checkbox with all available customizations.

Preview Code
php

API

The checkbox component extends from the Input class so it has all its methods available.

Common alternative names: Check Box, Tick Box, Selection Box, Option Box, Binary Choice, Selection Control

Types: Basic Checkbox, Checked Checkbox, Required Checkbox, Disabled Checkbox, Icon Checkbox, Indeterminate Checkbox

Principles

Binary Choice

Checkboxes provide a clear binary choice interface, making it obvious that the user can select or deselect an option.

Visual Feedback

The component provides immediate visual feedback through its checked state and optional icon display.

Accessibility

Maintains keyboard accessibility and screen reader compatibility while providing a modern visual interface.

Anatomy

Checkbox Anatomy
  1. Container

    2. Outer wrapper with form-check class

  2. Input

    3. Checkbox input element

  3. Label

    4. Text description of the checkbox's purpose

  4. Icon

    5. Optional visual indicator (when using card method)

Usage

Use checkboxes for:

  • Binary choices
  • Multiple selections
  • Terms and conditions
  • Feature toggles
  • Settings options
  • List selections
  • Form agreements