Checkbox UI component for Figma — 100 variants

Overview

The Checkbox UI component in Emvi UI enables users to select one or multiple options within a group. It is one of the most common form controls, designed to be clear, accessible, and consistent across platforms.

It leverages design tokens for color, size, spacing, and interactive states, ensuring compatibility with both light and dark themes. It includes support for the indeterminate state, useful in partially selected lists (e.g., nested items).

Simple Selection Tool

Use checkboxes for choices that can be combined, and distinguish checked, unchecked, disabled and indeterminate states. Keep labels concise and use spacing or icon cues to reinforce the message without relying on color alone.

Versatility in Use

In Figma, compare the component variants in a real product screen. Check spacing, contrast and labels across relevant states, then adapt the pattern to the team's design system. Document the selected variant and relevant states so the pattern stays consistent across screens.

Improving User Experience

Checkboxes contribute to a better user experience by making interactions straightforward. Users can quickly scan and select options without confusion, which is particularly helpful in forms or when managing lists. The clear visual feedback of a checked or unchecked box gives users immediate confirmation of their selections. Our UI kit includes a variety of customizable checkbox styles to fit seamlessly into any design, ensuring both functionality and visual consistency.

Checkbox Anatomy

Selection box: square, with empty, checked, or indeterminate states.
Associated label: clickable text for better accessibility.
Focus area: visible when navigating with keyboard.
Optional icons: checkmark, dash (indeterminate), or custom icons.

Checkbox Variants

Standard: box with label on the right.
Label-first: label placed before box, useful in horizontal layouts.
Inline: for dense forms.
Disabled: maintains sufficient contrast to indicate state.
Indeterminate: communicates partial selection.

Accessibility

Use these Figma states to plan the visual design. In the implemented form, prefer a native checkbox with an associated label and test keyboard focus, spacebar activation and contrast in every state.

Integration

In Figma, checkboxes are available as atomic components with variants (checked, unchecked, indeterminate, disabled).

The Figma file does not include checkbox code. Map the chosen styles to your own Tailwind implementation and test the finished control in the browser.