Chip
v1.0
Chips represent discrete input values.
- CSS
- Marko
- React
Chips represent discrete input values.
All chips have a title to represent the value entered or selected.
A hover state appears over the chip’s delete button.
Characters can be typed in plain text and converted to a chip by hitting the ENTER key or selecting a filtered value from a list.
Chips within a text field wrap to a new line when reaching the edge of the text box. The cursor wraps to a new line when the first chip is added.
Only valid entry values convert to chips. If a value fails validation, it should remain as plain text until corrected or deleted. Focusing away from an input field removes invalid values. Existing chips within the field remain.
Chips are removed by pressing (or holding) the BACKSPACE key within an empty input field or activating the delete button.
Chips have a minimum width of 56px.
Chips have a max width of 320px before the title is truncated. If chips are nested within an input field that is narrower than 336px then they will extend the full width of the field minus padding.
Input fields with chips leverage the same behavior as comboboxes:
Editing and selecting chips within a field on compact screens launches a fullscreen overlay.
Chip fields use popover menus to present values.
