Chip

Removable labels for multiselect comboboxes and inline body copy.

Sizes

md is 24px and the default. sm is 20px with tighter padding for dense multiselect fields. Pass the same variant to ChipRemove.

EnglishEnglish

import { Chip, ChipRemove } from "@smallest-inc/ui";

export default function ChipSizes() {
  return (
    <div className="flex items-center gap-3">
      <Chip variant="md">
        English
        <ChipRemove variant="md" aria-label="Remove English" />
      </Chip>
      <Chip variant="sm">
        English
        <ChipRemove variant="sm" aria-label="Remove English" />
      </Chip>
    </div>
  );
}

Fill

A chip inverts the field it sits in: container (white) on primary neutral-100 fields, neutral on secondary white fields.

HindiTamil

import { Chip, ChipRemove } from "@smallest-inc/ui";

export default function ChipFill() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <div className="flex flex-wrap gap-1 rounded-[10px] bg-neutral-100 px-3 py-2">
        <Chip fill="container">
          Hindi
          <ChipRemove aria-label="Remove Hindi" />
        </Chip>
        <Chip fill="container">
          Tamil
          <ChipRemove aria-label="Remove Tamil" />
        </Chip>
      </div>
      <div className="flex flex-wrap gap-1 rounded-[10px] bg-neutral-0 px-3 py-2 shadow-sm">
        <Chip fill="neutral">
          Hindi
          <ChipRemove aria-label="Remove Hindi" />
        </Chip>
        <Chip fill="neutral">
          Tamil
          <ChipRemove aria-label="Remove Tamil" />
        </Chip>
      </div>
    </div>
  );
}

Inline

A 20px chip at text-sm with a neutral-100 fill and border, for a removable value inside body copy. It keeps a 4px gap on each side and sits on the text baseline.

Calls toSupport lineare answered by Nova in English and Hindi.

Disabled

Disabling ChipRemove dims the whole chip and blocks removal, for values that are required.

Default voiceDefault voice

import { Chip, ChipRemove } from "@smallest-inc/ui";

export default function ChipDisabled() {
  return (
    <div className="flex items-center gap-3">
      <Chip>
        Default voice
        <ChipRemove disabled aria-label="Remove Default voice" />
      </Chip>
      <Chip variant="sm">
        Default voice
        <ChipRemove variant="sm" disabled aria-label="Remove Default voice" />
      </Chip>
    </div>
  );
}

In a combobox

ComboboxChip renders a chip and picks its fill from the ComboboxChips variant, so you only choose the field surface.

Agent languages

English

Hindi

Fallback languages

English

Hindi

import { useState } from "react";
import {
  Combobox,
  ComboboxChip,
  ComboboxChips,
  ComboboxChipsInput,
  ComboboxEmpty,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
  ComboboxValue,
  Label,
  useComboboxAnchor,
} from "@smallest-inc/ui";

const languages = ["English", "Hindi", "Spanish", "Tamil", "German", "French"];

function LanguageField({ label, variant }: { label: string; variant: "primary" | "secondary" }) {
  const anchor = useComboboxAnchor();
  const [selected, setSelected] = useState<string[]>(["English", "Hindi"]);

  return (
    <div className="flex flex-col gap-2">
      <Label>{label}</Label>
      <Combobox multiple items={languages} value={selected} onValueChange={(value) => setSelected(value as string[])}>
        <ComboboxChips ref={anchor} variant={variant}>
          <ComboboxValue>
            {(values: string[]) => values.map((value) => <ComboboxChip key={value}>{value}</ComboboxChip>)}
          </ComboboxValue>
          <ComboboxChipsInput placeholder="Add language" />
        </ComboboxChips>
        <ComboboxPopup anchor={anchor}>
          <ComboboxEmpty>No languages found.</ComboboxEmpty>
          <ComboboxList>
            {(language: string) => (
              <ComboboxItem key={language} value={language}>
                {language}
              </ComboboxItem>
            )}
          </ComboboxList>
        </ComboboxPopup>
      </Combobox>
    </div>
  );
}

export default function ChipInCombobox() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <LanguageField label="Agent languages" variant="primary" />
      <LanguageField label="Fallback languages" variant="secondary" />
    </div>
  );
}

Best practices

When to use

Use md or sm chips for selected values inside a Combobox multiselect. Use inline chips when a removable value sits in body copy.
Use Pill for read-only status or category labels that can't be removed.

Behavior

md (24px) is the default; sm (20px) is for dense fields. Pass the same variant to ChipRemove.
Fill inverts the field: fill="container" (white) on primary neutral-100 fields, fill="neutral" on secondary white fields. ComboboxChip picks this from the ComboboxChips variant, so set the field variant, not the chip.
md and sm use a shadow-sm stroke with no border. Inline uses neutral-100 with a border and sits on the text baseline.
Disable ChipRemove for required values; the whole chip dims.

Content

Chip labels are the value itself ("Hindi", "Support line"), not a description of it.

Accessibility

Every ChipRemove needs an aria-label naming the value: "Remove Hindi".

PreviousCheckbox NextCode