A guide to designing chip and text input fields
What is Chip and Text Input Field?
How does Chip Input improve user experience?
Chip Input is a compact pill shape that displays information e.g. the recipients of an email. The component helps users easily identify their entries and make their tasks easier to complete.
Design principles
Consistent: Chip input and text input field should be consistent with other components.
Contained: A chip input represents a single, contained unit e.g. User Name in a pill shape.
Dynamic: Visual feedback on chip input e.g. invalid data or suggested data.
User flow
Define: Input Methods and Interaction States
- Default state
- 1st text input
- Creation
- Edit
- Removal
- Complete 1st chip input
- Multiple chips
Default state
——
1st text input
——
Complete 1st Chip Input
——
Multiple Chip Inputs
Last thoughts
From an inclusive design perspective, I want to ensure users are in control of Chip and Text Input fields. They should be able to enter content in their preferred way. When we design a component, let’s consider designing for the needs of all of us, really.
