iOS
Android
- Label: This is the title of the input, displayed above the choice field, explaining what the user should select in that field.
- Chip: Displays an option that the user can select.
- Selected chip: Indicates the selection that the user makes.
Variants
The choice input has 2 variants: Single select and multi-select.
Multi-select
Use the multi-select choice input when the user can choose multiple answers at once.
- Label: This is the title of the input, displayed above the choice field, explaining what the user should select in that field.
- Chip: Displays an option that the user can select. In the Multi-select choice, it is marked with a "+" sign on the chip.
- Selected chip: Indicates the selection that the user makes. In the Multi-select choice, it is marked with a "V" sign on the chip.
Configurations
Learn how to customize the choice input component by configuring the available properties.
1. Pre-selected chip
You can configure choice input to have a default pre-selected choice. The user can deselect the pre-selected chip by tapping on it or, for single-select choice inputs, selecting a different chip.
2. Maximum number of chips
The default number of chips is 8. Once there are more than 8 chips, a "See all" button will appear, directing the user to a new screen to view all the options. You can adjust this number to any value that suits your needs.
A "See All" button is added
Tapping the "See All" button will take the user to a new screen where they can see all the options.
Once the user makes a selection on the new screen, the button’s microcopy that directs them to the screen will change to “See selected”:
If it’s a multi-select choice input, the button will display the number of selected options:
3. Actions menu
Add a actions menu button next to the choice input to give users the ability to perform various input actions. These actions include adding a comment, adding one or more attachments, and navigate to other screens.
4. Description
Add a description to the choice input to briefly explain the purpose of this selection:
5. Descriptive element
Add a descriptive element above the choice input to provide users with guidance or instructions about this selection:
6. Comments
Add a comment section below the choice input to allow users to provide additional feedback or thoughts about their selection:
The chip text should be limited to a maximum of 2 lines
A chip with more than 2 lines of text will be truncated
Avoid configuring the “None” option in a multi-select choice input, as it can lead to situations where the user selects “None” along with other options, which may cause confusion:
Multi-select choice input shouldn’t be configured with the “None” option
Configuring the “None” option in a multi-select Choice Input can result in conflicting selections that may cause confusion
Configure dependent choices (where the content of the lower input depends on the selection in the upper one) using a section. The section will group the two inputs together while maintaining enough space between them to preserve a clear hierarchy and distinguish the two inputs:
Using a section minimizes the space between the two fields and automatically adjusts their corner radius for a seamless look
Configuring dependent choices without proper spacing can confuse users and cause unrelated fields to appear merged
Alignment and positioning
Align the input choice to the center of the screen, maintaining a 16 px margin from the screen edges and the Nav Bar.
States
Choice input has 6 states: Default, Disabled, Read-only, Loaded, Long value and Minimum value.
Responsive behaviors
Learn how choice input responds to changes in screen size or orientation.
Landscape
The choice input stretches in landscape orientation as the screen becomes wider.
Interactions
Learn how choice input responds when a user interacts with it.
Tapping on a chip
When a user taps on a selected chip, it will deselect it:
In a single-select choice input, tapping on a different chip will deselect the current choice and select the new one:
In a multi-select choice input, tapping on a different chip will add the new chip to the current selection:
