Figma checkbox components

A checkbox is about the smallest component a design system contains, and it still manages to be a place where systems fall apart. Miss the indeterminate state, skip the focus ring, or freelance the label spacing and every form in your product inherits the problem. The 2 checkbox components and 72 variants above cover the details so you don't have to.

Checkbox, radio, or toggle?

The semantics matter more than the styling. Checkboxes are for selecting one or more options from a set, radio buttons are for choosing exactly one, and toggles are for on/off settings that take effect immediately. Nielsen Norman Group's guidelines are the reference worth bookmarking here.

If you find yourself designing a single checkbox that saves instantly, you probably wanted a toggle.

Label wording matters as much as the control. Phrase checkbox labels positively ("Send me updates" rather than "Don't send me updates") so a tick always means yes, and keep the label part of the clickable area. The components here pair the checkbox with its label and optional supporting text in one Auto Layout row, so the hit target is the whole line, not a lonely 16px square.

The state most kits forget: indeterminate

Select-all patterns need three states, not two. When a parent checkbox controls a list and only some children are ticked, the parent shows an indeterminate (mixed) state, the dash you see in every serious data table. It's part of the W3C's checkbox pattern and it's built into this set as a proper variant, so your table designs don't have to fake it with a detached instance.

Sizes, states, and group cards

The base checkbox comes in two sizes, 16px and 20px, each with default, hover, focused, and disabled states, checked and unchecked, with or without a label and supporting text.

On top of that sit checkbox group items: selectable rows and cards that pair the checkbox with an icon, avatar, or payment method, in desktop and mobile versions. They're the fast path to patterns like plan selection and permission lists, where a bare checkbox floating in space isn't enough. Each group item also comes in a separate mobile version with a taller touch-friendly layout, so the pattern survives the trip to smaller screens without a redesign.

Every state includes a visible focus ring, because keyboard users toggle checkboxes with the Space key and need to see which one they're on. It's a detail that costs nothing in a design file and gets expensive when it's missing in production. If you're designing dense tables of checkboxes, the sm size keeps rows tight while staying comfortably clickable.

Making checkboxes interactive in Figma

Because checked and unchecked exist as variants, an interactive checkbox is one "change to" interaction away: click swaps the variant, and interactive components keep that behavior inside the component so every instance in your prototype just works.

For advanced logic, like enabling a button once at least one box is ticked, Figma's variables and conditionals take over from there. That covers most of what user testing actually needs: people can tick options, see the state change, and behave like they would in the real product.

When you're ready to build, the same checkboxes exist in code. Untitled UI React checkboxes are open source, built with Tailwind CSS and React Aria, with keyboard activation and mixed-state semantics handled for you.