Overview

The ChipInput component provides an input field that allows users to enter multiple values, which are then displayed as chips. It supports adding values on pressing Enter or clicking outside the input, and removing or updating values by interacting with the chips.

Import

import ChipInput from "@components/chip-input/ChipInput";

Usage Example

import React, { useState } from "react";
import ChipInput from "./ChipInput";

const ChipInputDemo = () => {
  const [values, setValues] = useState(["Initial Chip"]);

  const handleValuesChange = (updatedValues) => {
    console.log("Updated Values:", updatedValues);
    setValues(updatedValues);
  };

  return (
    <ChipInput
      value={values}
      onChange={handleValuesChange}
      name="my-chip-input"
      separateInput={false} // Set to true to render chips over the input
      variant="filled" // or 'outlined'
      accent="teal" // or other color accents
      style={{ width: "100%" }} // Optional style
    />
  );
};

export default ChipInputDemo;

Result

Default (separateInput = false)

separateInput = true

Variant = "outlined"

Accent = "blue"

Props

Prop Name	Type	Description
value	Array<string>	An array of strings representing the initial values to be displayed as chips.
onChange	(updatedValues: Array<string>) => void	A callback function triggered when the list of chip values changes (a chip is added or removed). It receives the updated array of values.
name	string	The name attribute for the underlying input element.
separateInput	boolean	If true, renders the chips below the input field; otherwise, renders them within the input field area.
variant	string	The visual variant of the chips (e.g., "filled", "outlined"). Defaults to "filled".
accent	string	The color accent of the chips (e.g., "teal"). Defaults to "teal".