Use chips to allow users to quickly input a selection into an interface.
There are 2 kinds of chip, input and filter which are identical but act differently.
1. Input chip
2. Filter chip
Usage
Use an input chip to let users quickly insert a suggested value into an input field. Tapping the chip adds the value to the associated field without changing the chip’s state.
Use a filter chip to apply a filter to the interface with a single tap. When active, the chip displays a selected state. Within a group, only one filter chip can be selected at a time.
Do use chips for quick, lightweight actions. Use chips when the interaction is simple, reversible, and directly related to content or an input (for example, inserting a value or applying a filter).
Chips should not be used for primary actions, navigation, form submission, or any action that would normally require a button.
Don’t mix chip types in the same group. Avoid combining input chips and filter chips together, as this can make their behaviour and outcomes unclear.
Writing a chip
-
Do keep chip labels short and scannable
Chips work best with concise labels (one to three words) that clearly describe the value or filter being applied. -
Don’t use long or instructional labels
Chips are not suitable for descriptive sentences or instructions. If the label needs explanation, a different component is likely more appropriate.
-
“Electricity”
Clear, single concept. Easy to scan in a list of options. -
“Fixed tariff”
Familiar industry term that communicates value quickly.
-
“Show me electricity tariffs only”
Too conversational and instructional; better suited to helper text or a button label. -
“Tap here to view fixed energy plans”
Describes the interaction rather than the value, and is far too long for a chip.
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v5+ |
|
Web (@ovotech/element) |
❌ |
|
App (@ovotech/element-native) |
v5+ |
Related components