Components › Forms & input › Text field › Tag input

Tag input

canon

Input that turns typed values into removable tags.

Registry repaired 17 Oct 2026 (review F3): mapped existing Ladle stories. 19 Oct 2026 (owner, proto/mail-konverzace-chat-poradi@828a56aa0): clamp toggle moves INTO the bubble as the optional `more` prop (text button .cht-more "Show all" / "Show less", aria-expanded, white underlined on the accent bubble); the meta-row "Full message" action is removed; e-mail conversation order is oldest at top, newest at bottom, view anchored to the end of the thread.

Used in 4 files · 4 areas · 10× — components/assistant, pages/AiZamestnanciPage, pages/ProduktDetailPage, pages/PruvodceFirmyPage

.acrm-taginput .acrm-tag .acrm-tag-xSource Story Legacy card Inputs.html

Examples Code Usage Accessibility Changelog

Default

fintechpragueenterprise

components--tag-input--defaultOpen standalone ↗Code

packages/ui/stories/tag-input.stories.tsx

export const Default = () => (
  <div style={{ width: 360 }}>
    <TagInput initial={['fintech', 'prague', 'enterprise']} placeholder="Add tag…" />
  </div>
);

PrahaBrno

components--removable-chip--defaultOpen standalone ↗Code

packages/ui/stories/removable-chip.stories.tsx

export const Default = () => <Chips initial={['Praha', 'Brno']} />;

Variants

PrahaBrno

with the dashed add chip — the user may keep adding values

PrahaBrnoOstrava

read-only set — values can only be taken back, not added

components--removable-chip--variantsOpen standalone ↗Code

packages/ui/stories/removable-chip.stories.tsx

export const Variants = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-6)', justifyItems: 'start' }}>
    <Labeled text="with the dashed add chip — the user may keep adding values">
      <Chips initial={['Praha', 'Brno']} />
    </Labeled>
    <Labeled text="read-only set — values can only be taken back, not added">
      <Chips initial={['Praha', 'Brno', 'Ostrava']} add={false} />
    </Labeled>
  </div>
);

States

empty

fintechprague

filled

fintechpragueenterprisedecision makerseries bpartner

wrapping to a second row

Focus-within: border turns --accent with a 3px translucent ring (16 %); hover on the x fills --active-surface.

components--tag-input--statesOpen standalone ↗Code

packages/ui/stories/tag-input.stories.tsx

export const States = () => (
  <div style={grid}>
    <Labeled label="empty">
      <TagInput initial={[]} placeholder="Add tag…" />
    </Labeled>
    <Labeled label="filled">
      <TagInput initial={['fintech', 'prague']} placeholder="Add tag…" />
    </Labeled>
    <Labeled label="wrapping to a second row">
      <TagInput
        initial={['fintech', 'prague', 'enterprise', 'decision maker', 'series b', 'partner']}
        placeholder="Add tag…"
      />
    </Labeled>
    <span style={{ color: 'var(--fg-muted)', font: 'var(--small)' }}>
      Focus-within: border turns --accent with a 3px translucent ring (16 %); hover on the x fills
      --active-surface.
    </span>
  </div>
);

empty — nothing chosen yet, only the add chip is left

Praha

one value

PrahaBrnoOstravaPlzeňLiberecOlomoucZlín

many values — the row wraps, there is no „+N more“ fold

components--removable-chip--statesOpen standalone ↗Code

packages/ui/stories/removable-chip.stories.tsx

export const States = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-6)', justifyItems: 'start' }}>
    <Labeled text="empty — nothing chosen yet, only the add chip is left">
      <Chips initial={[]} />
    </Labeled>
    <Labeled text="one value">
      <Chips initial={['Praha']} />
    </Labeled>
    <Labeled text="many values — the row wraps, there is no „+N more“ fold">
      <div style={{ width: 260 }}>
        <Chips initial={POOL} />
      </div>
    </Labeled>
  </div>
);

Composition

Keywords

fintechprague

Enter adds a keyword, Backspace removes the last one.

components--tag-input--compositionOpen standalone ↗Code

packages/ui/stories/tag-input.stories.tsx

export const Composition = () => (
  <div style={{ width: 360 }}>
    <Field label="Keywords" hint="Enter adds a keyword, Backspace removes the last one.">
      <TagInput initial={['fintech', 'prague']} placeholder="Add keyword…" />
    </Field>
  </div>
);

Kraje

PrahaBrno

Vyber kraje, ve kterých firma působí.

components--removable-chip--compositionOpen standalone ↗Code

packages/ui/stories/removable-chip.stories.tsx

export const Composition = () => (
  <div style={{ width: 320 }}>
    <Field label="Kraje" hint="Vyber kraje, ve kterých firma působí.">
      <Chips initial={['Praha', 'Brno']} />
    </Field>
  </div>
);