With all of the choices that go into planning a trip, decision fatigue can overtake even the most seasoned traveler. Simplify the process for your users by presenting them with clear, well-defined choices.
Checkboxes make it clear that multiple options in a form can be selected. Make sure you add enough context so users have everything they need to make an informed decision.
Component status
Figma
Web (React)
iOS (Swift)
Android (Kotlin)
DocsContent structure
Guidelines
Support progressive disclosure
While it makes sense to provide users with the information they need to make a good choice, providing them with too much information at once actually makes it harder to decide.
So while you might be tempted to stuff everything into labels and additional info, you should try to follow progressive disclosure. This means using text links and tooltips to keep info hidden but close by.
Write positive labels
In addition to writing positively in general, you should especially focus on positive labels for checkboxes. Focus on what will happen when the checkbox is selected. Do not use the selected state for turning off features.
Use parallel labels
Whether you are offering filters for transport options, types of notifications to receive, or additional services to purchase, always present options using the same structure.
Related components
Radio
Checkboxes offer users multiple options or a single on–off option. Use radio buttons to present options where users can only select one from a group.
ChoiceGroup
Checkboxes can work for options when they’re on their own. If you need to group multiple options together into a single basic choice, use a choice group.