Skip to main content

Chip

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

There are four variations of the Chip - button, filter, radio 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. Filter variation can be used also with a popup-menu. The radio variation is similar to the filter but behaves like a radio button. 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" name="action" value="add">add to favorites</duet-chip>
<duet-chip variation="button" name="action" value="feed" icon="category-pet-dog">feed the dog</duet-chip>
<duet-chip variation="button" name="action" value="sleep" icon="category-pet-cat" disabled>sleep</duet-chip>

<script>
const buttonChips = document.querySelectorAll("duet-chip")
buttonChips.forEach(chip => {
chip.addEventListener("click", (evt) => {
const clicked = evt.target
console.log(`Action to take: ${clicked.value}`)
})
})
</script>
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 filter</duet-chip>
<duet-chip variation="filter" value="dis" disabled>disabled</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="filter" popup="category-popup">Category</duet-chip>
<duet-popup-menu id="category-popup">
<duet-popup-menu-item value="health-value-id-68792">Health</duet-popup-menu-item>
<duet-popup-menu-item>Pets</duet-popup-menu-item>
<duet-popup-menu-item>Vehicles</duet-popup-menu-item>
</duet-popup-menu>

<duet-chip variation="filter" icon="category-car" popup="vehicle-popup">Vehicle</duet-chip>
<duet-popup-menu id="vehicle-popup">
<duet-popup-menu-item>Motorbike</duet-popup-menu-item>
<duet-popup-menu-item>Car</duet-popup-menu-item>
<duet-popup-menu-item>Van</duet-popup-menu-item>
<duet-popup-menu-item>Truck</duet-popup-menu-item>
</duet-popup-menu>

<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" checked>second</duet-chip>
<duet-chip variation="radio" name="sample" value="dog" icon="category-pet-dog">dog</duet-chip>
<duet-chip variation="radio" name="sample" value="cat" icon="category-pet-cat" disabled>not available</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>
Open in new window
<duet-chip variation="input">first entry</duet-chip>
<duet-chip variation="input" icon="category-pet-dog">second entry</duet-chip>
Open in new window
<duet-chip size="large" checked variation="filter" value="one">First</duet-chip>
<duet-chip size="large" variation="filter" value="two">Second</duet-chip>
<duet-chip size="large" variation="filter" value="dog" icon="category-pet-dog">Dog filter</duet-chip>
<duet-chip size="large" variation="filter" icon="category-car" popup="vehicle-popup">Vehicle</duet-chip>
<duet-popup-menu id="vehicle-popup">
<duet-popup-menu-item>Motorbike</duet-popup-menu-item>
<duet-popup-menu-item>Car</duet-popup-menu-item>
<duet-popup-menu-item>Van</duet-popup-menu-item>
<duet-popup-menu-item>Truck</duet-popup-menu-item>
</duet-popup-menu>
<duet-chip size="large" variation="filter" value="cat" icon="category-pet-cat" disabled>Disabled</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>

Properties #

Property Attribute Description Type Default
accessibleExpanded accessible-expanded If the component expands or collapses adjacent content, then use this property to add the aria-expanded attribute to the opening element. Set the value to convey the current expanded (true) or collapsed (false) state of the content. boolean undefined
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
accessiblePopup accessible-popup Use this property to add an aria-haspopup attribute. string "false"
checked checked Checked state of the filter chip. boolean false
disabled disabled Makes the chip look inactive and announced as unavailable to assistive technologies. Prevents the default action. Not available for the input variation. 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
popup popup Id of the DuetPopupMenu that is controlled by the chip. string undefined
size size Size of the chip. Use "large" for a chip that has the same height as default duet-input and duet-button. "large" | "medium" "medium"
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"; }>
duetRemove Emitted when an input chip is removed. 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().

Parameters #

Name Type Description
options FocusOptions

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.
radio Select one item from a group of items.
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.