ChipInput
Free text that turns into removable chips, such as topics or email addresses. For a fixed list of options, use MultiSelect.
- ChipInput
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, ChipInput
design
accessibility
a-very-long-topic-name-that-has-to-truncate-inside-its-chip
Press Enter or type a comma after each topic.
Add at least one email address.
Dark theme, ChipInput
design
accessibility
a-very-long-topic-name-that-has-to-truncate-inside-its-chip
Press Enter or type a comma after each topic.
Add at least one email address.
High contrast theme, ChipInput
design
accessibility
a-very-long-topic-name-that-has-to-truncate-inside-its-chip
Press Enter or type a comma after each topic.
Add at least one email address.
UsageLink to the section Usage
import { ChipInput } from '@skribly/ui/forms'<ChipInput label="Topics" removeLabel="Remove" defaultValue={['design']}
duplicateMessage={(chip) => `"${chip}" is already in the list`} />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Enter or a comma adds a chip, and pasting a list splits it.
- The chips are one tab stop: arrow keys move, Delete or Backspace removes, and each remove button reads "Remove" and the chip.
- Backspace in the empty box moves to the last chip; a duplicate raises a polite warning.
This demo runs through axe in all three themes on every test run. See what the tests check.