Checkbox

You might say

These options don't conflict, so people should be able to choose more than one.

Choose one, several, or none of the optionsCheckboxes work for interests, filters, and other choices that are independent of one another. A single checkbox can also confirm one statement. If exactly one option must be selected, use Radio instead.

Front end Backend Design

Quick checkChoose the best answer

A subscription form offers email, SMS, and app notifications. People may choose several or none, and changes apply on submit. What fits?

Put all three channels in one radio groupUse three immediate switches and still keep a Submit buttonGive each notification channel its own checkbox

You can say this to an AI Agent

Use three independent checkboxes for email, SMS, and app notifications, allowing several or none, and apply them on submit. Verify clickable labels and the submitted channel values.

When to use it

Select several interests
FilterFrontendBackendDesign
Apply multiple filters
MusicMoviesSportsReadingGames
Choose rows in a table
Select all
Design.sketch
Requirements.md
Confirm one independent statement
I have read and agree to the Terms of Service

When NOT to use it

Use checkboxes for choices that exclude each other
Option AOption B
Mutually exclusive options shouldn’t use checkboxes
Preselect consent that the user should give knowingly
Autosave
Show clear feedback after the change takes effect
Make the clickable label too small
Place order
A checkbox isn’t a button; clicking it doesn’t submit
Leave the effect of selecting a parent item unclear
BeijingShanghaiGuangzhouShenzhenHangzhouChengduWuhanXi’anNanjing…
A flat list of many options takes up too much space

Anatomy

Receive product update emails

Each checkbox row is independently clickable.

Use an indeterminate mark when only some child items are selected

Explain what selecting the checkbox will do

Variants

Default

MusicMovies

Use for multiple independent choices or a single confirmation

Indeterminate

Select allDesign draft.sketchRequirements document.md

Use an indeterminate state when only some items in a batch are selected

Disabled

UnavailableSelected disabled

When an option is temporarily unavailable

Want GPT or Codex?VibeHubGPT support

GPT-6 Astra

Build in 3D. Put your computer to work.