|Kit

Pill

Compact, optionally removable chip — the token the form family renders selected values into, and a standalone tag elsewhere.

Pill is a small chip for a single value or token. It's what MultiSelect and TagsInput render each selected value into, and it works standalone anywhere you need a removable tag. Neutral by default; pass a color to tint it, and withRemoveButton to add a × control.

import { Pill, PillGroup } from '@42/ui-react/pill';

<Pill>C</Pill>
<Pill withRemoveButton onRemove={() => remove('cpp')}>C++</Pill>

Playground

Component

Loading preview

Props

Code

<Component size="md">  C</Component>

Removable

withRemoveButton renders a trailing × that fires onRemove. The button is keyboard-focusable and labelled (removeLabel, default "Remove"); its click is stopped from bubbling so it won't trigger an enclosing option or input.

C++

Code

<Pill withRemoveButton onRemove={() => {}}>C++</Pill>

Colors

Without a color the pill is a neutral gray. A color tints it with that palette's soft surface and text (--c-soft / --c-text), so it reads as a quiet token, not a loud badge. See Colors.

neutralbrandgreenpurplered

Code

<Pill>neutral</Pill><Pill color="brand">brand</Pill><Pill color="green">green</Pill><Pill color="purple">purple</Pill>

Sizes

Five sizes — xs through xl — so pills can match the input they sit inside.

xssmmdlgxl

Code

<Pill size="xs">xs</Pill><Pill size="sm">sm</Pill><Pill size="md">md</Pill><Pill size="lg">lg</Pill><Pill size="xl">xl</Pill>

Pill.Group

PillGroup lays pills out in a wrapping row and sets size (and disabled) once for every child — each pill can still override. This is the shape MultiSelect / TagsInput use to render their values.

CC++UnixDocker

Code

<PillGroup size="md"><Pill withRemoveButton>C</Pill><Pill withRemoveButton>C++</Pill><Pill withRemoveButton>Unix</Pill><Pill withRemoveButton>Docker</Pill></PillGroup>

Disabled

disabled dims the pill and disables its remove button. Set it on a single pill or on the whole PillGroup.

LockedRead-only

Code

<PillGroup disabled><Pill withRemoveButton>Locked</Pill><Pill withRemoveButton>Read-only</Pill></PillGroup>

API

Pill

Prop

Type

PillGroup

Prop

Type

Pill forwards remaining props to its root span (incl. asChild); PillGroup forwards to its root div.

Accessibility

  • The remove button is a real <button> with an aria-label (removeLabel) so assistive tech announces "Remove". It's keyboard-focusable and triggered by Enter / Space.
  • The button's pointer interaction is stopped from bubbling and preserves focus on a host input — so removing a value inside a PillsInput / MultiSelect doesn't blur the field or submit an option.
  • RTL: the chip is a plain flex row and the remove button uses logical margin (-me-0.5), so it mirrors correctly under dir="rtl".

Combobox

The kit's composable search-select primitive — a thin styled layer over Ark UI's Combobox. The engine Autocomplete and MultiSelect build on, and the escape hatch for fully custom pickers.

PillsInput

A multi-line input shell that lays out removable pills alongside a search field — the target MultiSelect and TagsInput mount into.

On this page

PlaygroundRemovableColorsSizesPill.GroupDisabledAPIPillPillGroupAccessibility