Forms

Chip

A chip — a compact, labelled object: a filter, a tag, a recipient.

Client componentSource

Import

import { Chip } from '@the_viveksingh/vivek-ui'

Three shapes, and the element changes with the job

Static chips are spans. Selectable chips are real aria-pressed buttons, so a filter bar is announced correctly for free. Removable chips keep the remove control as its OWN button - never a button inside a button, which is why selectable and onRemove are mutually exclusive.

Filters — each chip is a real toggle button

Showing: Open

Removable — Delete or Backspace works on the focused chip

DesignEngineeringDocsA11y
// A filter: a real toggle button underneath.
<Chip selectable selected={on} onSelectedChange={setOn}>Mine</Chip>

// A tag: Delete or Backspace on the focused chip also removes it.
<Chip tone="primary" onRemove={() => remove(tag)} removeLabel={`Remove ${tag}`}>
  {tag}
</Chip>

Tones

The soft washes with their AA-verified text partners.

DraftIn reviewShippedBlockedFailing
<Chip tone="neutral">Draft</Chip>
<Chip tone="primary">In review</Chip>
<Chip tone="success">Shipped</Chip>
<Chip tone="warning">Blocked</Chip>
<Chip tone="danger">Failing</Chip>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Chip
PropTypeDefaultDescription
children requiredReactNode——
iconReactNode—Leading glyph. Decorative — the label is the name.
size'sm' | 'md' | 'lg'——
tone'neutral' | 'primary' | 'success' | 'warning' | 'danger'——
disabledboolean——
onRemove() => void—Renders a remove button and makes Delete/Backspace on the focused chip fire it — the same keyboard contract TagInput's chips follow.
removeLabelstring—Accessible name of the remove button. The visible x says nothing to a reader.
selectableboolean—Makes the chip a toggle — a real `<button aria-pressed>`, so a filter bar of chips is operable and announced correctly for free.
selectedboolean——
defaultSelectedboolean——
onSelectedChange(selected: boolean) => void——

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering