Chips

On this page

Anchor watchDepth alarmWeather watch

The kit's chips drawn live.

Code

import { Chips } from "@bosunkit/components/chips";
import type { ReactElement } from "react";
import { useState, type Dispatch, type SetStateAction } from "react";

export const description: string =
  "The watches set as removable chips, each with its own remove button named in the crew's language.";

const WATCHES = [
  { value: "anchor", label: "Anchor watch" },
  { value: "depth", label: "Depth alarm" },
  { value: "weather", label: "Weather watch" },
];

export default function Watches(): ReactElement {
  const [items, setItems] = useState<readonly { value: string; label: string }[]>(WATCHES);
  const remove = (value: string): void => {
    setItems(items.filter((entry: { value: string; label: string }): boolean => entry.value !== value));
  };
  return <Chips items={items} onRemove={remove} testId="watches" />;
}

Displaying and removing values

Use Chips for an ordered set of named values, such as selected filters or assigned categories. Each entry has a stable value for identity and a caller-translated label for display. Labels may change without changing the stored value. Supply unique values and keep a meaningful order as entries are added or removed.

Without onRemove, chips are read-only labels. With it, each chip has a native remove button named for that entry. The callback reports the value; the chip remains until the caller supplies the updated list. disabled disables removal. It does not make the labels disappear or turn them into selectable options.

Adding, persistence and empty sets

Chips has no add field, filtering or persistence. Pair it with the appropriate input or picker, or use SettingChips for an editable settings list. A removal from a shared record must follow the consumer's save and conflict handling; preserve the last confirmed values when saving fails. If every chip is removed, explain what the empty set means next to the control. After a removal, keep keyboard focus on a remaining remove button or the add control rather than losing the user's place.

ArchitectureReview

Read-only topic labels

Props

Prop	Type	Default	Description
itemsrequired	readonly ChipEntry[]	–	The chips, in order.
onRemove	((value: string) => void) \| undefined	–	Called with a chip's value when its remove button is pressed; the chips stay until the caller removes.
disabled	boolean \| undefined	–	Whether the remove buttons take no input.
className	string \| undefined	–	Classes added to the row's own.
testId	string \| undefined	–	Becomes `data-testid` on the row; a chip is `${testId}--<value>`, its remove `${testId}--<value>--remove`.

Form field: visible labels, hints and validation associations.
Interaction states: pending, disabled, read-only and invalid behavior.
Content: names, quantities and useful messages.

Displaying and removing values

Adding, persistence and empty sets

Props

Related