Fusion UI

Playground

ChipInput enters several values into one field. Each value becomes a chip; suggestions help to pick known values.

disabled

enableSearch

allowCustomValues

import { ChipInput } from "@brynlabs/fusion-ui"

<ChipInput
  disabled={false}
  placeholder={"Type to search..."}
  enableSearch={true}
  allowCustomValues={false}
  loading={false}>
</ChipInput>

Basic usage

"use client";

import React, {useState} from "react";
import {ChipInput} from "@brynlabs/fusion-ui";

export const BasicUsageExample = () => {
  const [basicValue, setBasicValue] = useState(["JavaScript", "TypeScript"]);

  const basicValues = [
    "JavaScript",
    "TypeScript",
    "React",
    "Vue",
    "Angular",
    "Node.js",
    "Express",
    "Next.js",
    "Svelte",
    "Python",
    "Java",
    "C++",
    "Go",
    "Rust",
    "PHP",
    "Ruby",
  ];

  return (
    <ChipInput
      label="Programming Languages"
      placeholder="Type to search languages..."
      value={basicValue}
      values={basicValues}
      onChange={setBasicValue}
    />
  );
};

Custom object values

Values can be objects with a label, e.g. people with an id.

"use client";

import React, {useState} from "react";
import {ChipInput} from "@brynlabs/fusion-ui";

export const CustomObjectValuesExample = () => {
  const [customValue, setCustomValue] = useState([
    {id: 1, name: "Apple"},
    {id: 2, name: "Banana"},
  ]);

  const fruitValues = [
    {id: 1, name: "Apple"},
    {id: 2, name: "Banana"},
    {id: 3, name: "Cherry"},
    {id: 4, name: "Date"},
    {id: 5, name: "Elderberry"},
    {id: 6, name: "Fig"},
    {id: 7, name: "Grape"},
    {id: 8, name: "Honeydew"},
  ];

  return (
    <ChipInput
      label="Fruits"
      placeholder="Select your favorite fruits..."
      value={customValue}
      values={fruitValues}
      onChange={setCustomValue}
      mapValueToString={fruit => fruit.name}
      searchKeys={["name"]}
    />
  );
};

No search

"use client";

import React, {useState} from "react";
import {ChipInput} from "@brynlabs/fusion-ui";

export const NoSearchExample = () => {
  const [basicValue, setBasicValue] = useState(["JavaScript", "TypeScript"]);

  const basicValues = [
    "JavaScript",
    "TypeScript",
    "React",
    "Vue",
    "Angular",
    "Node.js",
    "Express",
    "Next.js",
    "Svelte",
    "Python",
    "Java",
    "C++",
    "Go",
    "Rust",
    "PHP",
    "Ruby",
  ];

  return (
    <ChipInput
      label="Categories"
      placeholder="Select from dropdown..."
      enableSearch={false}
      value={basicValue}
      values={basicValues.slice(0, 8)}
      onChange={setBasicValue}
    />
  );
};

Custom values

People can also add values that are not suggested.

"use client";

import React, {useState} from "react";
import {ChipInput} from "@brynlabs/fusion-ui";

export const CustomValuesExample = () => {
  const [tagsValue, setTagsValue] = useState(["React", "UI"]);

  return (
    <ChipInput
      label="Tags"
      placeholder="Type to add custom tags..."
      allowCustomValues={true}
      value={tagsValue}
      values={["React", "Vue", "Angular", "Svelte", "Next.js", "Nuxt.js"]}
      onChange={setTagsValue}
      customValueLabel={query => `Create "${query}" tag`}
    />
  );
};

Chip Input

Playground

Basic usage

Custom object values

No search

Custom values