Chip Input

The catnip-input-chip custom element collects multiple string values (tags, filters, skills, etc.): a single-line draft field, Add control (on by default), and removable chips below. It composes catnip-input internally for the draft line so sizing, intent, icons, and label patterns stay aligned with Input. Shared label and supporting-text behaviour is summarised on Inputs overview.

Overview

• Chips (v-model): model-value / .modelValue is the committed chips (string[]). Draft typing is not part of modelValue.
• Commit: Non-empty draft commits on Enter (default input only) or via Add. Set show-add-button="false" for Enter-only. Emits update:modelValue with the new chips array.
• Chip limits: Use min-chips / max-chips to keep the committed tag count within bounds. Use max-visible-chips to show only the first tags and collapse the rest behind a tertiary Show n more control, then expand/collapse with Show more / Show less.
• Add button: Forward props through .addButton="{ label, ariaLabel, appearance, leftIcon, ... }". label overrides the default + Add string (inputChip.add in the bundled locale); type, disabled, and size stay the chip input.
• Draft input props: Configure the default embedded text field with .catnipInput="{ placeholder, leftIcon, showClearButton }". Ignored when the draftInput slot is used.
• Clear draft (default input): Set catnipInput.showClearButton to show catnip-input’s trailing clear control while the draft has text. It clears only the unsent line, not chips (catnipInput.clearButtonAriaLabel overrides the default input.clear label).

Draft line

Two ways to supply the draft field — pick one; the draft API differs:

	Default embedded catnip-input	draftInput slot
Set draft from parent	chipRef.setDraftValue('…')	.draftValue="draft"
Observe draft	@update:draftValue (optional)	Your slotted control binding
After Add commits	Chip clears draft	You clear .draftValue

Default — chip owns draft; parent intervenes with setDraftValue() when needed (prefill, reset). Do not bind .draftValue.

Custom slot — parent owns draft entirely via .draftValue. Do not call setDraftValue() (no effect). See Chip Input — Specs — Draft line.

Live example

Relationship to catnip-input

There is no type="chip" on catnip-input. Use this component whenever you need chips. Shared behaviour (label slots, supporting text, intents, leading icon) matches Input; draft-specific input props are forwarded through catnipInput following the composed components convention.

Accessibility

• Label: Same integrated label model as Input—label prop or label slot; for / id wiring is handled when you omit catnipInput.id or set it for stable anchors.
• Draft field: The native control stays a single-line text input; aria-describedby includes supporting text when present (rendered after the chip list).
• Add button: Secondary catnip-button with type="button" so it does not submit forms; provide addButton.ariaLabel only if the visible label is insufficient.
• Show more / less: When max-visible-chips hides chips, the tertiary Show n more control expands the full committed list without changing the value. The expanded list shows Show less at the bottom-right of the chip area.
• Clear draft: The optional trailing clear control on the draft field uses the same accessible pattern as catnip-input (input.clear by default, or catnipInput.clearButtonAriaLabel).
• Chips: Use catnip-chip removals; keep keyboard and screen-reader flows consistent with chip guidance.