Skip to main content

Chip

The qds-chip is a small interactive element that represent selections. Chips allow users to make a selection from a list of options, or display items like filters or tags.

Usage​

The qds-chip element is an interactive element supporting two behaviors: the selectable type toggles a checkmark on and off, the closable type shows a close icon on its right edge.

Loading...
Live Editor
<qds-chip text="click me"></qds-chip>

Selectable vs. Closable​

The qds-chip is either "selectable" OR "deletable", not both. it is selectable by default but you can change its type.

Selectable​

Selectable chips are useful when users need to make selections from a list of options and may want to change their selection before finalizing their choices.

Selectable vs. checkbox​

Handy for filtering tasks, providing a more visually appealing and interactive option compared to checkboxes.

Loading...
Live Editor
<qds-chip
  type="selectable"
  text="selectable chip"
  icon-name="status-info"
  icon-library="core"
></qds-chip>

Closable​

Featuring a close icon, these chips enable users to remove them individually with a simple click, making them perfect for items that users may want to delete one at a time.

Closable vs. tag​

Closable chips provide interactive removal with a close icon, whereas tags serve as static visual markers for categorization or organization.

Loading...
Live Editor
<qds-chip type="closable" text="closable chip"></qds-chip>

Text​

The text property sets the label displayed in the chip:

Loading...
Live Editor
<qds-chip text="chip"></qds-chip>

Writing guidelines​

  • Use positive and active wording for the label to clearly indicate their function when interacted with.
  • Keep chip labels concise for easy scanning and comprehension.

Size​

Chips follow the transversal control size principles. Use the standard size unless you're in one of the specific contexts described on that page.

Loading...
Live Editor
<div class="qds-controls qds-related">
  <label class="qds-controls qds-related flex flex-row">
    <qds-label inline text="Standard size:"></qds-label>
    <qds-chip text="Select me"></qds-chip>
  </label>
  <label class="qds-controls-large qds-related flex flex-row">
    <qds-label inline size="large" text="Large size:"></qds-label>
    <qds-chip size="large" text="Select me"></qds-chip>
  </label>
  <label class="qds-controls-small qds-related flex flex-row">
    <qds-label inline size="small" text="Small size:"></qds-label>
    <qds-chip size="small" text="Select me"></qds-chip>
  </label>
</div>

Icon​

Use the icon-name property to display an icon to the left on the chip. Quartz will look into the default icon library unless you specify another library using the icon-library property.

In Figma, enable the 🅵 icon toggle to see the icon-name property. See the Usage > Icons instructions for more details.

Loading...
Live Editor
<qds-chip type="closable" icon-name="draggable" icon-library="core" text="close"></qds-chip>

Grouping​

When used in a group, use the desktop.control.standard.gap.siblings.related token.

Loading...
Live Editor
<div class="qds-controls flex-row">
  <qds-chip type="closable" text="Close me"></qds-chip>
  <qds-chip text="choose me"></qds-chip>
  <div class="qds-controls qds-related flex flex-row">
    <qds-chip text="confirm"></qds-chip>
    <qds-chip type="closable" text="close"></qds-chip>
  </div>
</div>

In forms​

Follow the Forms design pattern guidelines to properly organize and space your form labels and controls.

Disabled​

Use the disabled attribute to disable the chip. Clicks will be suppressed until the disabled state is removed.

Loading...
Live Editor
<qds-chip disabled text="Disabled"></qds-chip>

Implementation tips​

Importing​

Note: if you're using the lazy loader to load Quartz components, you can ignore this section.

To import this component from the public jsDeliver CDN using a JavaScript import:

import { defineCustomElementQdsChip } from 'https://cdn.jsdelivr.net/npm/@quartzds/core@next+esm'
defineCustomElementQdsChip()

Component reference​

Properties​

Attribute / PropertyTypeDescriptionDefault
autofocus / autoFocus
boolean | undefined

Specify whether the chip should have focus when the page loads.

undefined
checked
boolean | undefined

Sets the selectable chip's state.

undefined
disabled
boolean | undefined

Prevents the chip from being interacted with: it cannot be pressed or focused.

undefined
form
HTMLFormElement | null | string

The <form> element to associate the chip with (its form owner).

The value of this property must be the id of a <form> in the same document. If this property is not set, the <qds-chip> is associated with its ancestor <form> element, if any.

This property lets you associate <qds-chip> elements to <form>s anywhere in the document, not just inside a <form>. It can also override an ancestor <form> element.

null
icon-library / iconLibrary
string

The name of a registered icon library.

'default'
icon-name / iconName
string | undefined

The name of the icon to render.

Available names depend on the icon library being used.

undefined
name
string | undefined

The name of the chip, which is submitted with the form data.

undefined
size
"large" | "small" | "standard"

The chip's size.

'standard'
text
string | undefined

The chip's text.

undefined
type
"closable" | "selectable" | undefined

The chip's type.

'selectable'
value
null | number | string | undefined

The value of the chip, submitted as a name/value pair with form data.

'on'

Events​

EventTypeDescriptionBubblesCancelableComposedqdsBlur
{ readonly relatedTarget: EventTarget | null; }

Emitted when the chip loses focus.

qdsChange
void

Emitted when a change to the selectable chip's state is committed by the user.

qdsClose
void

Emitted when the chip is closed.

qdsFocus
{ readonly relatedTarget: EventTarget | null; }

Emitted when the chip gains focus.

Last updated on