ChipInput

ChipInput

Basic Usage

Press Enter to add tags

reactsolid

With Transform (Lowercase)

Input is automatically lowercased

With Validation (Email)

Only valid emails are accepted. Try typing an invalid email and pressing Enter.

Email addresses

user@example.com

Custom Add Keys (Comma)

Press Enter or Comma to add

onetwo

Layout Options

Above (default)

chipabove

Below

chipbelow

Left

left

Disabled State

disabledchips

Usage

import { ChipInput } from "@f0rbit/ui";

const [tags, setTags] = createSignal<string[]>([]);

<ChipInput
  value={tags()}
  onChange={setTags}
  placeholder="Add a tag..."
/>

Props

Prop	Type	Default	Description
value	string[]	—	Array of chip values
onChange	(value: string[]) => void	—	Callback when chips change
transform	(input: string) => string	—	Transform input before adding (e.g., lowercase)
validate	(input: string, current: string[]) => boolean	—	Validate input before adding
allowDuplicates	boolean	false	Allow duplicate chip values
addKeys	string[]	["Enter"]	Keys that trigger adding a chip
placeholder	string	—	Placeholder text for the input
disabled	boolean	false	Disable the input
error	boolean	false	Show error styling

Transform

Use the transform prop to modify input before adding as a chip:

<ChipInput
  value={tags()}
  onChange={setTags}
  transform={(s) => s.trim().toLowerCase()}
  placeholder="Lowercase tags..."
/>

Validation

Use the validate prop to control which values can be added:

const isValidEmail = (email: string) =>
  /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

<ChipInput
  value={emails()}
  onChange={setEmails}
  validate={(email) => isValidEmail(email)}
  placeholder="Add email..."
/>

Custom Add Keys

By default, pressing Enter adds a chip. Use addKeys to customize:

<ChipInput
  value={items()}
  onChange={setItems}
  addKeys={["Enter", ","]}
  placeholder="Press Enter or comma..."
/>

Allow Duplicates

By default, duplicate values are prevented. Enable with allowDuplicates:

<ChipInput
  value={items()}
  onChange={setItems}
  allowDuplicates
  placeholder="Duplicates allowed..."
/>

With FormField

Combine with FormField for labels and error messages:

<FormField label="Tags" error={error()}>
  <ChipInput
    value={tags()}
    onChange={setTags}
    error={!!error()}
    placeholder="Add tags..."
  />
</FormField>

Common Use Cases

Tag Input

<ChipInput
  value={tags()}
  onChange={setTags}
  transform={(s) => s.trim().toLowerCase()}
  placeholder="Add tag..."
/>

Email List

<ChipInput
  value={emails()}
  onChange={setEmails}
  validate={(email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)}
  placeholder="Add email address..."
/>

Comma-Separated Values

<ChipInput
  value={values()}
  onChange={setValues}
  addKeys={["Enter", ","]}
  placeholder="Type values separated by comma..."
/>