A selectable pill: alone a toggle, in a group a single or multiple choice, or a removable tag.

Web + MobileBetaForms

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

When to use

To filter a list with a few short options shown at once: format, genre, speed.
Chip.Group type="multiple" for several tags; type="single" (with required) for one filter.
removable for the values already chosen: tags, recipients, active filters.

When not to use

To switch between views of the same page.Use instead: Tabs
To choose in a form that is submitted, with labels that read as sentences.Use instead: Radio group
For a status that cannot be changed.Use instead: Badge
To run an action.Use instead: Button

Installation

Install

npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { Chip } from "@krizaka/ui/chip";

Examples

Toggle

Alone, off and on: a pressed button.

import { Chip } from "@krizaka/ui/chip";

// Alone, a chip is a pressed button: `selected` / `onSelectedChange`, or `defaultSelected`.
export default function ChipToggle() {
  return (
    <div className="flex gap-2">
      <Chip>Subtitles</Chip>
      <Chip defaultSelected>HD</Chip>
      <Chip disabled>4K</Chip>
    </div>
  );
}

Single choice

One choice in a group: a filter; required keeps one chosen.

import { Chip } from "@krizaka/ui/chip";

// One choice: a filter. `required` keeps one chosen.
export default function ChipSingle() {
  return (
    <Chip.Group type="single" label="Format" defaultValue="all" required>
      <Chip value="all">All</Chip>
      <Chip value="videos">Videos</Chip>
      <Chip value="stories">Stories</Chip>
      <Chip value="collections">Collections</Chip>
    </Chip.Group>
  );
}

Multiple choice

Several choices: tags.

import { Chip } from "@krizaka/ui/chip";

export default function ChipMultiple() {
  return (
    <Chip.Group type="multiple" label="Tags" defaultValue={["night", "rain"]}>
      <Chip value="night">#night</Chip>
      <Chip value="city">#city</Chip>
      <Chip value="rain">#rain</Chip>
      <Chip value="neon">#neon</Chip>
    </Chip.Group>
  );
}

Small

size="sm" for dense toolbars.

import { Chip } from "@krizaka/ui/chip";

export default function ChipSmall() {
  return (
    <Chip.Group type="single" label="Speed" size="sm" defaultValue="1">
      <Chip value="0.5">0.5×</Chip>
      <Chip value="1">1×</Chip>
      <Chip value="1.5">1.5×</Chip>
      <Chip value="2">2×</Chip>
    </Chip.Group>
  );
}

Removable

Chosen tags, each with a named remove button.

#night#city

import { Chip } from "@krizaka/ui/chip";

// Chosen tags, each with a named remove button.
export default function ChipRemovable() {
  return (
    <div className="flex flex-wrap gap-2">
      <Chip removable removeLabel="Remove #night" onRemove={() => {}}>
        #night
      </Chip>
      <Chip removable removeLabel="Remove #city" onRemove={() => {}}>
        #city
      </Chip>
    </div>
  );
}

Props

Chip

Chip (selectable, removable) and Chip.Group (single · multiple).

Prop	Type	Default	Description
`onRemove`required	`() => void`	—	Runs when the remove button is pressed.
`removeLabel`required	`string`	—	The accessible name of the remove button — passed translated, e.g. "Remove #night".
`defaultSelected`	`boolean`	—	Alone: pressed at first, uncontrolled.
`onSelectedChange`	`((selected: boolean) => void)`	—	Alone: called with the new state on every press.
`removable`	`boolean`	—	A pressable chip (the default); `true` makes it a static chip with a remove button. A static chip (a chosen tag, an applied filter) with a remove button.
`selected`	`boolean`	—	Alone: pressed or not (`defaultSelected` uncontrolled), `onSelectedChange` on every press.
`size`	`"sm" \| "md"`	`md`	sm · md (inside `Chip.Group`, the group's size by default).
`value`	`string`	—	Inside `Chip.Group`: the value this chip stands for (required there, ignored alone).

ChipGroup

Chips that choose together: type single · multiple, value/defaultValue + onValueChange.

Prop	Type	Default	Description
`type`required	`"single" \| "multiple"`	—	One choice: the chips behave as radios. Any number of choices: the chips are pressed buttons.
`defaultValue`	`string \| string[]`	—	The value chosen at first, uncontrolled. The values chosen at first, uncontrolled.
`disabled`	`boolean`	—	Disables every chip of the group.
`label`	`string`	—	The group's accessible name — passed translated ("Filter by format").
`loop`	`boolean`	—	Arrow keys wrap from the last chip to the first (default `true`).
`onValueChange`	`((value: string) => void) \| ((value: string[]) => void)`	—	Called with the new value on every choice. Called with the new values on every press.
`orientation`	`"horizontal" \| "vertical"`	—	The arrow keys that move: left / right (horizontal, a row) or up / down (vertical, a column).
`required`	`boolean`	—	Keeps one chip selected: pressing the selected chip does not clear it (default `false`).
`size`	`"sm" \| "md"`	`md`	sm · md: the size of every chip of the group.
`value`	`string \| string[]`	—	The chosen value (controlled), `""` when none. The chosen values (controlled).

Accessibility

Radix Toggle and ToggleGroup: alone aria-pressed; in a single group a radio (aria-checked), in a multiple group pressed buttons.
Chip.Group takes label as the group's accessible name.
The remove button is a separate button named by removeLabel.

Keyboard

Keys	Action
`Tab`	Moves into the group (one tab stop) and out of it.
`Arrow keys`	Move between the chips of a group.
`Space / Enter`	Toggles the focused chip.

Best practices

One or two words per chip; the group's label says what is being chosen.
Keep the order stable when a chip is selected: do not move it to the front.
Give each removable chip a removeLabel that names it: “Remove #night”, not “Remove”.

Generated from the code of @krizaka/ui 2.0.0-beta.6: its meta.ts, its examples and its types.Edit this documentation on GitHub