Checkbox

UI Components

A small square box that can be toggled between checked and unchecked states, used for selecting multiple options from a list or confirming a single choice.

Visual Examples

Example 1

Example 2

Example 3

Visual examples for Checkbox coming soon.

How It Works in Apps/Websites

Checkboxes allow binary selection (yes/no, on/off). When checked, they display a checkmark inside the box. Unlike radio buttons, multiple checkboxes in a group can be selected simultaneously. They're used for multi-select options, agreeing to terms, or toggling boolean settings. Changes often require form submission to take effect.

How AI Interprets This Term

When you say 'checkbox', AI expects: a small square (16-20px), with rounded or sharp corners, showing a checkmark when selected. Border is usually gray, checked state fills with accent color and shows white checkmark. Label text positioned to the right of the checkbox.

Prompt Examples

Copy-paste these prompts to use in your AI tools.

Basic

Create a checkbox for agreeing to terms of service

Detailed

Design a checkbox component: 18px square, 3px border radius, unchecked has gray border, checked has blue (#3b82f6) fill with white checkmark. Include hover state (background tint) and focus ring. Label 16px, 8px from checkbox.

Comparative

Show checkbox (multi-select) vs radio button (single-select) vs toggle switch (instant effect) for same use case

Compare With

Related or contrasting terms to help you understand the differences.

radio buttontoggle switchchip

Variants & States

Variants

default checkboxindeterminatewith descriptioncheckbox group

States

uncheckedcheckedindeterminatedisabledhoverfocus

Usage Guidelines

When to Use

  • •Multiple selections from a list
  • •Terms and conditions agreement
  • •Optional settings
  • •Filters

When NOT to Use

  • •Single selection from options (use radio)
  • •Immediate effect needed (use toggle)
  • •More than 7-10 options (consider dropdown)

Related Terms

Radio Button

A circular input control used in groups where only one option can be selected at a time, with selecting one automatically deselecting others in the group.

Toggle Switch

A control that allows users to switch between two mutually exclusive states (on/off, yes/no, enabled/disabled) with immediate effect.

form
Back to category