githubEdit

Checkbox

Add accessible checkbox controls with Radix UI in Webstudio.

Based on Radix Checkboxarrow-up-right

The Radix Checkbox component provides a fully customizable checkbox with complete styling control while maintaining accessibility features.

When to Use Radix Checkbox

Use Radix Checkbox when you need:

  • Custom checkbox styling beyond native browser limits

  • Animated check indicators

  • Complex checkbox designs (custom icons, sizes, colors)

  • Indeterminate state support

For simple forms where native styling is acceptable, the native Checkbox component works well.

Structure

Component
Description

Checkbox

The main checkbox container

Checkbox Indicator

Contains the check mark or icon

How to Use

  1. Drag a Checkbox component from Components > Radix onto your canvas

  2. The component includes a pre-configured indicator

  3. Add a Label and associate it with the checkbox

  4. Style all states (unchecked, checked, disabled)

Properties

Checkbox

Property
Description

id

Unique identifier for label association

name

Form field name for submission

value

Value sent when checked

checked

Control checked state

required

Whether checking is required

disabled

Disable the checkbox

Checkbox Indicator

Property
Description

forceMount

Keep indicator in DOM when unchecked

Basic Setup

Styling States

Data Attributes

State
Selector
Description

Unchecked

[data-state=unchecked]

Default state

Checked

[data-state=checked]

Selected state

Indeterminate

[data-state=indeterminate]

Partial selection

Disabled

[data-disabled]

Cannot interact

Example Styles

Checkbox container:

  • Default: border, background, size

  • Checked: different background/border

  • Focus: visible ring for accessibility

Indicator:

  • Hidden when unchecked (opacity: 0 or display: none)

  • Visible when checked (opacity: 1)

  • Animate with transitions

Indeterminate State

The indeterminate state is useful for "select all" checkboxes:

This indicates partial selection of child items.

Custom Check Icons

Replace the default indicator content:

  1. Add an SVG or icon component inside Checkbox Indicator

  2. Style the icon size and color

  3. Animate on check/uncheck

Animation Tips

Add smooth check animations:

Accessibility

Radix Checkbox provides:

  • Full keyboard support (Space to toggle)

  • ARIA attributes automatically applied

  • Focus management

  • Screen reader announcements

Ensure you:

  • Always provide a visible label

  • Maintain sufficient color contrast

  • Include focus indicators

Form Integration

Radix Checkbox works with Webstudio forms:

The checkbox value is submitted with the form when checked.

Comparison

Feature
Native Checkbox
Radix Checkbox

Styling

Limited

Full control

Custom icons

No

Yes

Animations

No

Yes

Indeterminate

JavaScript only

Built-in

Accessibility

Browser default

WAI-ARIA

Size

13-16px typically

Any size

Last updated

Was this helpful?