githubEdit

β˜‘οΈCheckbox

Add checkbox inputs to forms in Webstudio.

See MDN: <input type="checkbox">arrow-up-right

The Checkbox component creates an HTML checkbox input for boolean selections.

Overview

Checkboxes allow users to select one or more options from a set, or toggle a single option on/off.

Properties

Property
Type
Description

name

string

Form field name

value

string

Value submitted when checked

checked

boolean

Whether the checkbox is checked

required

boolean

Whether selection is required

disabled

boolean

Whether input is disabled

id

string

Unique identifier

class

string

CSS class names

Basic Usage

Single Checkbox

For a single yes/no option:

Checkbox Group

For multiple selections:

When submitted, all checked values are sent with the same name.

Styling Checkboxes

Native Styling

Browser checkboxes can be styled with:

  • accent-color: Change the checked color

  • width/height: Adjust size

  • cursor: pointer: Show clickable cursor

Custom Checkbox

For fully custom checkboxes, consider using the Radix Checkbox component, which provides complete styling control while maintaining accessibility.

Form Submission

Single Checkbox

If checked, sends: name=value If unchecked, nothing is sent

Multiple Checkboxes (same name)

Sends all checked values: interests=design&interests=development

Validation

Required Checkbox

For required checkboxes (like terms acceptance):

The form won't submit until the checkbox is checked.

Accessibility

  1. Always use labels: Associate every checkbox with a label

  2. Group related checkboxes: Use fieldset and legend for groups

  3. Provide clear labels: Make options self-explanatory

  4. Keyboard support: Ensure checkboxes work with Space key

Grouping with Fieldset

States

Style different checkbox states:

State
Description

Unchecked

Default empty state

Checked

Selected state

Disabled

Cannot be interacted with

Focus

Keyboard focus visible

Indeterminate

Partial selection (JavaScript only)

Best Practices

  1. Use for multiple selections: Use checkboxes when users can select multiple options

  2. Label clickable: Make entire label area clickable

  3. Vertical alignment: Stack checkboxes vertically for easier scanning

  4. Reasonable defaults: Pre-check options when appropriate

  5. Clear labeling: Use positive phrasing (what happens when checked)

When to Use

Use Checkbox
Use Radio
Use Toggle

Multiple selections

Single selection from many

On/off setting

Optional agreements

Required choice

Immediate effect

Filter options

Exclusive options

Settings

Last updated

Was this helpful?