Chip

Input chips are primarily for user-selected categories and disappear when clicked.

<bolt-chip-group>
  <bolt-input-chip label="Category 1"></bolt-input-chip>
  <bolt-input-chip label="Category 2"></bolt-input-chip>
  <bolt-input-chip label="Category 3"></bolt-input-chip>
</bolt-chip-group>

Toggle chips are for pre-defined categories and toggle between checked and unchecked when clicked.

<bolt-chip-group>
  <bolt-toggle-chip label="Category 1"></bolt-toggle-chip>
  <bolt-toggle-chip label="Category 2" checked></bolt-toggle-chip>
  <bolt-toggle-chip label="Category 3"></bolt-toggle-chip>
</bolt-chip-group>

All of the following color options apply to both input chips and toggle chips.

By default, chip color automatically adapts to both local background context and global theme.

<bolt-chip-group>
  <bolt-toggle-chip label="Category 1"></bolt-toggle-chip>
  <bolt-toggle-chip label="Category 2" checked></bolt-toggle-chip>
  <bolt-toggle-chip label="Category 3"></bolt-toggle-chip>
</bolt-chip-group>

Theme colors adjust with the global theme to preserve a semantic hierarchy of color options, while ensuring minimum contrast ratios.

They can safely be used on any theme surface color, but should not be used on static background color contexts.

<bolt-chip-group>
  <bolt-toggle-chip color="primary" label="Primary"></bolt-toggle-chip>
  <bolt-toggle-chip color="secondary" label="Secondary"></bolt-toggle-chip>
  <bolt-toggle-chip color="tertiary" label="Tertiary"></bolt-toggle-chip>
</bolt-chip-group>

Static chip color options should be chosen in accordance with brand standards and contrast minimums.

<bolt-chip-group>
  <bolt-toggle-chip label="charcoal" color="charcoal"></bolt-toggle-chip>
  <bolt-toggle-chip label="darkBlue" color="darkBlue"></bolt-toggle-chip>
  <bolt-toggle-chip label="darkGray" color="darkGray"></bolt-toggle-chip>
  <bolt-toggle-chip label="darkMint" color="darkMint"></bolt-toggle-chip>
  <bolt-toggle-chip label="mediumBlue" color="mediumBlue"></bolt-toggle-chip>
  <bolt-toggle-chip label="vibrantBlue" color="vibrantBlue"></bolt-toggle-chip>
</bolt-chip-group>

<bolt-chip-group>
  <bolt-toggle-chip label="lightBlue" color="lightBlue"></bolt-toggle-chip>
  <bolt-toggle-chip label="mint" color="mint"></bolt-toggle-chip>
  <bolt-toggle-chip label="paleGray" color="paleGray"></bolt-toggle-chip>
  <bolt-toggle-chip label="white" color="white"></bolt-toggle-chip>
</bolt-chip-group>

• color (optional)
  • By default, automatically adapts to contextual theme and global theme to ensure accessible contrast.
    • When configuring color, designers are responsible for meeting brand standards and contrast minimums.
  • Theme colors
    • Dynamically update with the global theme.
    • Provides a consistent hierarchy of accent colors that work in both light and dark mode.
    • Values:
      • primary
      • secondary
      • tertiary
  • Static colors
    • Neither thematically nor contextually aware.
    • Values:
      • vibrantBlue
      • charcoal
      • darkBlue
      • darkGray
      • darkMint
      • lightBlue
      • mediumBlue
      • mint
      • paleGray
      • white

• datatestbutton (optional)
  • Optional property to configure the [data-test] value on the underlying <button> element.
  • default: "button"
• label (required)
  • The label text for the input chip.

• blur
• bolt-dismissed: fires when user has dismissed the chip
• bolt-removed: fires when a dismissed chip is removed from the DOM
• click
• focus

• arialabel (optional)
  • Overrides the accessible label of the underlying <input>.
• checked (optional)
  • If present, the control is checked.
• color (optional)
  • By default, automatically adapts to contextual theme and global theme to ensure accessible contrast.
    • When configuring color, designers are responsible for meeting brand standards and contrast minimums.
  • Theme colors
    • Dynamically update with the global theme.
    • Provides a consistent hierarchy of accent colors that work in both light and dark mode.
    • Values:
      • primary
      • secondary
      • tertiary
  • Static colors
    • Neither thematically nor contextually aware.
    • Values:
      • vibrantBlue
      • charcoal
      • darkBlue
      • darkGray
      • darkMint
      • lightBlue
      • mediumBlue
      • mint
      • paleGray
      • white

• datatestinput (optional)
  • Optional property to configure the [data-test] value on the underlying <input> element.
  • default: "input"
• label (required)
  • The label text for the toggle chip.

• blur
• change: fires when toggled
• click
• focus
• input: fires when toggled

• Chips can be used to allow users to control information displayed on a page.
• Consider using Chips when more than 1 filter can be applied.
• Chips of the same type should be grouped together and include labels to provide context.
  • Multiple groups of Chips may exist on the same page. Likewise, Input and Toggle Chips may coexist on a page.
  • If both types of Chips are used on the same page, there should be clear delineation between the groups and as much space between them as possible.
• There should be a way for all Chips to be cleared at once. (e.g., a "Clear filters" Button)
• Consumers are responsible for choosing Chip colors that pass accessibility requirements.

• Toggle Chips have a checked and unchecked state.
• Clicking a Toggle Chip should initiate a change to the opposite state.
• The leading Icon in a selected Toggle Chip should not be swapped out for other icons. Nor should it be hidden.

• Input Chips may appear from different sources:
  • When a user makes a selection from a Select or similar input.
  • When a Toggle Chip is clicked.
  • When a user types in a text field or applies other text-based filtering criteria.
• The Chip label should display the selected or typed filtered criteria.
• Clicking an Input Chip should dismiss the Chip and remove the filtering associated with it.
• The trailing Icon should not be swapped out for other icons. Nor should it be hidden.

• When there is a large set of data or information and filtering would help a user narrow to their desired results.

• Avoid using Chips to display non-interactive metadata.
• Avoid when interactions do not affect the current page.

• If displaying non-interactive, categorical metadata, use Tag instead.
• When making a selection affects what appears next in a flow, use Radio button or Checkbox instead.
• When navigation is desired, use Link or Button instead.

• Chip labels should not wrap or truncate.
• Input chip labels should match filtered criteria.

• Chips require a minimum contrast of 4.5:1 between the chip color and its parent surface.
• Input chips have built-in logic to announce dismissal and retain tab focus position.
  • Downstream application logic should not interfere with this behavior.
• Make use of live regions to announce updates to displayed information that are a result of interacting with chips.

All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.