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 #

<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>

<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>

<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>

<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>

<duet-chip variation="input">first entry</duet-chip>
<duet-chip variation="input" icon="category-pet-dog">second entry</duet-chip>

<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 #

Events #

Methods #

removeChip() => Promise<void> #

Removes input chip. Use this method instead of the native remove() so the component can
emit appropriate event

Returns #

Type: Promise<void>

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

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

Parameters #

Returns #

Type: Promise<void>

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:

Troubleshooting

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