Design all the states, not

Design all the states, not just the happy path.

When creating a design system, it's easy to focus only on the default state, but developers need much more.

In the case of checkboxes like this component, devs require unchecked, indeterminate, and checked states, as well as focus states for keyboard navigation, and disabled states that meet contrast requirements.

This isn't just extra work; it's essential for accessibility. Screen readers need accurate state communication, and keyboard users need visible focus. If you skip these steps, the devs may make incorrect assumptions, leading to inconsistencies.

Investing a little bit of extra time in designing states can save hours of back-and-forth later. Your component isn't complete until every state is thoughtfully designed!