Chips

A component for displaying and managing a collection of small items or tags that users can add and remove.

Basic Usage

Basic Chips

Simple chips with add and remove functionality

React
TypeScript

Fruit Tags

Chips with custom placeholder and preset values

Apple
Banana
Cherry

import { Chips } from 'fluxo-ui';

function MyComponent() {
  const [chips, setChips] = useState(['React', 'TypeScript']);

  return (
    <Chips
      value={chips}
      placeholder="Add tags..."
      onChange={(e) => setChips(e.value)}
    />
  );
}

Limited Chips

Maximum 3 chips allowed

Non-removable Chips

Chips that cannot be removed

Fixed
Tags
Here

import { Chips } from 'fluxo-ui';

function MyComponent() {
  const [chips, setChips] = useState([]);

  return (
    <Chips
      value={chips}
      placeholder="Max 5 tags, comma separated..."
      maxItems={5}
      separator=","
      allowDuplicates={false}
      onChange={(e) => setChips(e.value)}
    />
  );
}

States

Disabled State

Chips in disabled state

Disabled
Chips

Import

import { Chips } from 'fluxo-ui';

Props

PropertyTypeDefaultDescription

value

string[]

"[]"

Array of chip values

value

string[]"[]"

Array of chip values

onChange

function

—

Callback fired when chips change: (event: ComponentEvent<string[]>) => void

onChange

function

Callback fired when chips change: (event: ComponentEvent<string[]>) => void

placeholder

string

""Type and press Enter to add""

Placeholder text for input

placeholder

string""Type and press Enter to add""

Placeholder text for input

maxItems

number

—

Maximum number of chips allowed

maxItems

number

Maximum number of chips allowed

allowDuplicates

boolean

false

Whether duplicate chips are allowed

allowDuplicates

booleanfalse

Whether duplicate chips are allowed

separator

string

"",""

Separator character for adding multiple chips at once

separator

string"",""

Separator character for adding multiple chips at once

disabled

boolean

false

Whether the component is disabled

disabled

booleanfalse

Whether the component is disabled

readonly

boolean

false

Whether the component is readonly (no input or removal allowed)

readonly

booleanfalse

Whether the component is readonly (no input or removal allowed)

id

string

—

HTML id attribute for the container

id

string

HTML id attribute for the container

name

string

—

HTML name attribute for the hidden input

name

string

HTML name attribute for the hidden input

args

any

—

Custom arguments passed to onChange callback

args

any

Custom arguments passed to onChange callback

ariaLabel

string

—

Accessible label for the chip list and input

ariaLabel

string

Accessible label for the chip list and input

commitOnTab

boolean

true

Commit the current input as a chip when Tab is pressed (common tag-input UX)

commitOnTab

booleantrue

Commit the current input as a chip when Tab is pressed (common tag-input UX)

Features

Add & Remove

Type and press Enter or comma to add chips; click x to remove any chip

Max Items

Optionally cap the number of chips with the maxItems prop

Duplicate Control

Allow or prevent duplicate entries via the allowDuplicates prop

Custom Separator

Define which character splits a pasted or typed string into multiple chips

Disabled & Readonly

Fully supports disabled (no interaction) and readonly (display-only) modes

Accessibility

Keyboard navigation, ARIA roles and labels for screen reader support

Theming

Full dark/light + 5 brand themes via CSS variables -- zero extra config