Design System

      Chip

      Figma LibraryLocal HTMLGlobal HTMLReact
      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.