The component props.
The rendered chips input component.
This component manages a list of strings, rendering them as chips. It uses a hidden input
to store the joined values (separated by separator) for form submission.
Users can add chips by typing and pressing Enter, or by pasting text containing the separator.
Chips can be deleted by backspacing or clicking a delete button (if provided in render).
import { string, array, minLength } from 'valibot';
import { ChipsInput, Chip, RemoveChipButton } from './chip_input';
function TagsInput() {
return (
<ChipsInput
name="tags"
separator=","
render={({ value, isFocus, onDelete }) => (
<Chip className={isFocus ? 'focused' : ''}>
{value}
<RemoveChipButton onClick={onDelete} />
</Chip>
)}
/>
);
}
A component that allows users to enter multiple values as "chips".