All components (204)

Toggle chip

Choice · ToggleChip · .amset-chip

What it is and when to use it

A chip that switches on and off: a filter, a layer, a category. It is a <button aria-pressed>, so the keyboard, the focus and the screen reader are the browser's own. Each chip can carry its own color, which is what sets it apart from SegmentedGroup, where all the options share the box and the accent.

When to use it

Filters of a list that are switched on and off separately (statuses, folders, labels), above all if each has its own color or count.
Layers of a map or a calendar that are shown or hidden.
An exclusive choice with colored chips: the consumer governs the selected of each one so that only one is active.
color for the color of each chip, count for the count ("All 12") and icon for a drawing in front.
Several together go inside ToggleChipGroup (Chip group), which gives them a name and the same gap.

When not to

Choosing ONE option among a few with the same box and the same accent: SegmentedGroup.
Choosing one among several that need to be shown (a theme, a plan): OptionCard inside RadioGroup.
Values already chosen that can be removed (recipients, applied filters): Tag with onRemove or AppliedFilters.
An option of a form that travels with it: Checkbox or Switch.

Keyboard: each chip is a Tab stop. Enter and Space switch it on and off. When disabled (disabled) it takes no focus.

Accessibility: it carries aria-pressed, so it is announced as "pressed" or "not pressed"; the count is part of the name ("All 12") and the icon is decorative. Color alone is not enough, so when switched on the shape changes too: the background fills, the border thickens and a check mark appears (withCheck, on by default). The text color when switched on is the chip's color mixed with the ink; whoever picks the colors is responsible for them reaching 4.5:1 on their background. On a touch screen it is at least 44 px tall.

Fine-tuning: the color is set with color or with the variable --amset-chip-color (any CSS color, also from a class): the border, the soft background and the ink come from it. The rest, in --amset-chip-* variables: -height, -padding, -gap, -font, -icon and -radius (var(--amset-radius-sm) gives square chips).

What it looks like

Filtering by 1 of 4.

<ToggleChipGroup label="Folders">
  <ToggleChip count={4} color="oklch(0.7 0.14 152)" selected={activa} onChange={setActiva}>
    Casa
  </ToggleChip>
  <ToggleChip count={12} color="oklch(0.68 0.15 250)">Work</ToggleChip>
</ToggleChipGroup>

Props

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

Prop	Type	What it does
`children`required	`ReactNode`	What is read and seen: it is the name of the chip for the screen reader.
`className`	`string`	Merged with the library classes; it does not replace them.
`color`	`string`	The colour of the chip: any CSS colour. It paints the border, the soft background and the ink when activated. It is the `--amset-chip-color` variable, set through `style`.
`count`	`string \| number`	A count after the text ("All 12"): it is read as part of the name.
`defaultSelected`	`boolean`	Whether it is switched on at the start, governing itself.
`disabled`	`boolean`	—
`icon`	`ReactNode`	An icon in front of the text (decorative: the text gives the name).
`onChange`	`(selected: boolean) => void`	Called with the NEW value: `true` when switched on, `false` when switched off.
`selected`	`boolean`	Whether it is switched on, governed from outside.
`size`	`"sm" \| "md" \| "lg"`	24, 28 or 36 px tall.
`withCheck`	`boolean`	Shows a check mark when switched on, in addition to the color.

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

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-chip-color`	`var(--amset-accent)`
`--amset-chip-height`	`1.75rem`
`--amset-chip-padding`	`var(--amset-space-3)`
`--amset-chip-gap`	`var(--amset-space-1)`
`--amset-chip-font`	`var(--amset-text-sm)`
`--amset-chip-icon`	`0.875rem`
`--amset-chip-radius`	`999px`
`--amset-chip-border`	`color-mix(in oklab, var(--amset-chip-color) 40%, transparent)`
`--amset-chip-background`	`transparent`
`--amset-chip-text`	`var(--amset-ink-2)`
`--amset-chip-ink-share`	`30%`

How to change it

.amset-chip {
  --amset-chip-color: ...;
  --amset-chip-height: ...;
}

In the test bench

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