Quaff

QChip

Chips present compact actions, choices, or entered information alongside related content. Assist, filter, input, and suggestion variants suit different interactions.

THE NEIGHBORHOOD SEED EXCHANGE

Find seeds to share

Find your first seeds
info QChip API Source
interface QChipProps extends HTMLAttributes<HTMLDivElement>
disabled
?: boolean = false
Puts the component into a disabled state, which prevents user interaction.
elevated
?: boolean = undefined
Elevates an assist, filter, or suggestion chip, giving it box-shadow and a background color.
icon
?: MaterialSymbol | `img:${string}` = undefined
Name of the leading icon to use for the chip. If starts with "img:", will be used as an image src instead.
kind
?: QChipKindOptions = "assist"
The chip's kind. It will control the chip's style and behavior.
label
?: string = undefined
The text to be displayed in the component. When applicable, will overwrite the children snippet content.
noRipple
?: boolean = false
Disable the ripple effect for the chip.
onTrailingIconClick
?: MouseEventHandler<HTMLElement> = undefined
Click event handler for the trailing action. For input chips with a trailing icon, also called on Backspace or Delete. An input chip without a value or onclick handler uses the entire chip as its removal action.
selected
?: boolean = $bindable(kind === "filter" ? false : undefined)
Only for filter chips. Controls whether the chip is selected or not.
size
?: Exclude<QSize, "none" | "xs" | "xl"> = "sm"
Size of the component to choose between multiple predefined sizes.
trailingIcon
?: MaterialSymbol | `img:${string}` = undefined
Only for filter and input chips. Name of the trailing icon to use for the chip. Provide onTrailingIconClick to make the icon actionable.
trailingIconLabel
?: string = undefined
Accessible name for the trailing action. Defaults to "Remove" followed by the chip label for input chips, or "Options for" followed by the label for filter chips. Remove-only chips also honor an existing aria-label or aria-labelledby before using this default.
value
?: string = $bindable(undefined)
Editable text for input chips. This property is bindable and independent of the displayed label. If no label is provided, the input chip will display the current value instead.

Usage

Filter and Suggestion Chips
kind="filter" chips bind selected to refine a collection. Selected chips replace their leading icon with a check. Try a suggestion, combine categories, or use the sun chip's separate information action without changing its selection.
SHARED BY LOCAL GROWERS

Filter the seed list

All seeds
A balcony herb garden
A sunny flower patch
Flowers
Herbs
Vegetables

6 varieties to explore

  • Sunflower · 14 packets available
    Add Sunflower
  • Calendula · 8 packets available
    Add Calendula
  • Basil · 10 packets available
    Basil added
  • Mint · 6 packets available
    Add Mint
  • Lettuce · 5 packets available
    Add Lettuce
  • Peas · Unavailable
    Next season

Assist is the default kind. Assist, filter, and suggestion chips are outlined by default; elevated adds a surface and shadow. disabled keeps unavailable actions out of the keyboard order.

Editable and Removable Chips
Input chips turn small pieces of information into editable, removable items. Bind value to edit a packet name. The trailing action removes it; Enter, Escape, or leaving the editor returns to the chip while keeping the current text.

Editable packet labels

Basil is in your envelope. Add something new.

LABEL-ONLY INPUT CHIP
Bring spare envelopes

This reminder has no editable value. Its label and close icon form one removal action.

Tab reaches editing and removal separately. Space or Enter activates a focused action; Backspace or Delete removes a focused input chip. Customize the removal name with trailingIconLabel. Sizes are sm (default), md, and lg.

Avatars, Labels and Actions
Prefix icon with img: for an avatar. An input chip's displayed label can be shorter than its editable value: this partner chip shows a name while preserving the contact address.

A name with an editable address

Ada Rivers <ada@seed.example>

A contextual action

Show swap location

Choose the assist chip to show the swap location.

Use onclick for contextual actions and onTrailingIconClick for a separate trailing action. Add a class to use theme colors. Ripple feedback is enabled by default; the location chip uses noRipple. Suggestion and assist chips do not support trailing icons, and input chips do not use elevation.

Privacy Policy