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 #
<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>
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.
- Use
accessibleLabel
property to add accessible label for the Chip if the text content of the Chip would not be informative enough for users of assistive technologies
Additional considerations #
- The text label in a Chip should be short, no more than 20 characters
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.
Tutorials
Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:
Building Layouts
TutorialsUsing CLI Tools
TutorialsCreating Custom Patterns
TutorialsServer Side Rendering
TutorialsSharing Prototypes
TutorialsUsage With Markdown
Troubleshooting
If you experience any issues while using a component, please head over to the Support page for more guidelines and help.