Chip
Figma Library | Local HTML | Global HTML | React |
---|---|---|---|
considering | under review | alpha | alpha |
A Chip is a compact UI element that displays information, can be removed via a close button, and is ideal for tags, filters, or selection indicators.
It allow users to close the chip using keyboard interactions. For accessibility, users can press the Enter
or Space
key to close the chip when it is focused.
Label 1
close
Label 2
close
Label 3
close
<div class="gi-chip" aria-label="chip: Label 1" aria-describedby="chip-description" tabindex="0"> <span id="chip-description">Label 1</span> <div role="button" aria-label="remove chip"> <span role="presentation" class="material-symbols-outlined gi-block" style="font-size:16px">close</span> </div> </div>
import { Chip } from '@govie-ds/list';
const handleClose = () => {}
<Chip label="Label 1" onClose={handleClose} />
When to use this component
Use the Chip component to display concise information, such as tags or selected items, that users can easily identify and remove. Ideal for filtering, categorizing, or indicating selections in forms and lists.
When not to use this component
Avoid using the Chip component for lengthy content, essential actions, or complex user interactions. It’s best suited for simple tags and removable items.