All components (204)

Chip group

Choice · ToggleChipGroup

What it is and when to use it

Several ToggleChip together, with a name for the whole set. It gives them all the same gap and wraps onto the next line when they do not fit, instead of overflowing the width.

When to use it

The filters of a list that are switched on separately (folders, statuses, tags): the group gives them a name, "Folders", and lays them out.
label is required: it is what the screen reader announces on entering the group. Each chip is governed on its own, with its selected or its defaultSelected: the group keeps no state.

When not to

Choosing ONE option among a few with the same box and the same accent: SegmentedGroup. One among several that need to be shown: OptionCard inside RadioGroup.
Values already chosen that can be removed (recipients, applied filters): Tag with onRemove or AppliedFilters.
A single chip: it needs no group.

Keyboard: the group adds no keys of its own. Each chip is a Tab stop and toggles with Enter or Space; a disabled chip takes no focus.

Accessibility: it is a role="group" with label as its accessible name, so the screen reader announces the group by its name on entering, and each chip is announced as "pressed" or "not pressed". It is not a list of mutually exclusive options: switching one on does not switch the others off, and the role of each chip (aria-pressed) says so.

Fine-tuning: --amset-chip-group-gap, the gap between chips (--amset-space-2, by default). Each chip's own, in the --amset-chip-* of its card.

What it looks like

Tagged as: Urgent.

<ToggleChipGroup label="Ticket tags">
  <ToggleChip selected={urgente} onChange={setUrgente}>Urgent</ToggleChip>
  <ToggleChip selected={facturacion} onChange={setFacturacion}>Billing</ToggleChip>
  <ToggleChip selected={envios} onChange={setEnvios}>Shipments</ToggleChip>
</ToggleChipGroup>

Props

Import it with import { ToggleChipGroup } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	—
`label`required	`string`	The name of the group for the screen reader ("Folders", "Layers").
`className`	`string`	Merged with the library classes; it does not replace them.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: