Get help Color blind mode Low vision mode

Chip

Chips are interactive controls used for presenting multiple related and dynamic actions.

There are three variations of the Chip - button, filter and input. The button variation behaves like a button and should be used when the offered actions are dynamic, depending on the users context (e.g. actions based on previous choices or suggestions based on given input). The filter variation behaves like a checkbox and is used to enabling and disabling filtering categories. The input variation is used to present items the user has input and which can be removed.

Examples #
Open in new window 
<duet-chip variation="button">add to favorites</duet-chip>
<duet-chip variation="button" icon="category-pet-dog">feed the dog</duet-chip>
Open in new window 
<duet-chip checked variation="filter" value="one">first</duet-chip>
<duet-chip variation="filter" value="two">second</duet-chip>
<duet-chip variation="filter" value="dog" icon="category-pet-dog">dog</duet-chip>

<script>
  const filterChips = document.querySelectorAll("duet-chip[variation=filter]")
  filterChips.forEach(chip => {
    chip.addEventListener("duetChange", () => {
      const checked = [...filterChips].filter(chip => chip.checked).map(chip => chip.value).join(", ")
      console.log(checked)
    })
  })
</script>
Open in new window 
<duet-chip variation="radio" name="sample" value="one">first</duet-chip>
<duet-chip variation="radio" name="sample" value="two">second</duet-chip>
<duet-chip variation="radio" name="sample" value="dog" icon="category-pet-dog">dog</duet-chip>

<script>
  const radioChips = document.querySelectorAll("duet-chip[name=sample]")
  radioChips.forEach(chip => {
    chip.addEventListener("duetChange", () => {
      const checked = [...radioChips].filter(chip => chip.checked).map(chip => chip.value).join(", ")
      console.log(checked)
    })
  })
</script>

Properties #

Property Attribute Description Type Default
accessibleLabel accessible-label Adds accessible label for the chip that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology. string undefined
checked checked Checked state of the filter chip. boolean false
icon icon Icon to display to the left of the chip content. string ""
identifier identifier Adds a unique identifier for the chip. string undefined
name name Name attribute of the html input (filter) or button. string undefined
theme theme Theme of the button. "" | "default" | "turva" ""
value value The value of the html input when used as filter, or the button's value. string undefined
variation variation Variation of the chip. Button should be used to present a list of actions or suggestions. It behaves like a button and must be used together with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be used with a value. Input represents items input by the user, and the chip can be removed with a click. Radio behaves like a radio button, it can be toggled on or off, and it should be used with a value and name. WARNING: Input variation is still work-in-progress and subject to change. "button" | "filter" | "input" | "radio" "button"

Events #

Event Description Type
duetBlur Emitted when the chip loses focus. CustomEvent<{ originalEvent?: Event; checked: boolean; value: string; component: "duet-chip"; }>
duetChange Emitted when the checked property has changed (applicable only for the filter variation). CustomEvent<{ originalEvent?: Event; checked: boolean; value: string; component: "duet-chip"; }>
duetFocus Emitted when the chip receives focus. CustomEvent<{ originalEvent?: Event; checked: boolean; value: string; component: "duet-chip"; }>

Methods #

setFocus(options?: FocusOptions) => Promise<void> #

Sets focus. Use this method instead of the global focus().

Returns #

Type: Promise<void>

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

When to use #

  • When the actions or items are dynamic
  • When there are multiple related actions

When not to use #

  • When the actions or items are static, i.e. the same for all users. Use e.g. a button component or a toggle component instead
  • When the actions are not related to each other
  • When there are only one or two actions

Variations #

This section describes the different component variations, their purpose, and when to use each variation.

Name Purpose
button Actionable controls - provide the action either with a onclick event listener or the Chips url attribute.
filter Toggle items on and off.
input Collect items input by the user, typically from a predefined set, e.g. emails from an address book or illnesses from a disease list.

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.

Additional considerations #

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.

Integration guidelines

Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Building Layouts

 Tutorials

Using CLI Tools

 Tutorials

Creating Custom Patterns

 Tutorials

Server Side Rendering

 Tutorials

Sharing Prototypes

 Tutorials

Usage With Markdown

Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.