Chip

A small, interactive element that represents an entity, often displayed in a group.

Usage

To display a chip, pass a label to <Chip>.

Chip 1

Chip 2

Chip 3

import { Chip } from "stylus-ui/Chip";

export default () => (
  <div className="flex flex-wrap gap-1.5">
    <Chip label="Chip 1" />
    <Chip label="Chip 2" />
    <Chip label="Chip 3" />
  </div>
);

Avatars

To display an avatar with the chip, pass an avatar prop. It takes an AvatarProps object.

Nam-Chi Van

Ivan Salim

Ryan Bach

import { Chip } from "stylus-ui/Chip";

const users = [
  {
    id: "1",
    name: "Nam-Chi Van",
  },
  {
    id: "2",
    name: "Ivan Salim",
  },
  {
    id: "3",
    name: "Ryan Bach",
  },
];

export default () => (
  <div className="flex flex-wrap gap-1.5">
    {users.map((user) => (
      <Chip label={user.name} avatar={{ children: user.name, uuid: user.id }} />
    ))}
  </div>
);

Icons

Import a Font Awesome icon and pass it to the icon prop.

Images

Arbitrary images can be displayed by passing in an img object with src and alt properties.

MDN

import { Chip } from "stylus-ui/Chip";

export default () => (
  <Chip
    img={{
      src: "https://developer.mozilla.org/favicon.ico",
      alt: "MDN Favicon",
    }}
    label="MDN"
  />
);

Errors

Set error to true to display an error chip.

Error

With avatar

With icon

With image

import { Chip } from "stylus-ui/Chip";
import { faTag } from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <div className="flex flex-wrap gap-1.5">
    <Chip label="Error" error />
    <Chip label="With avatar" avatar={{ children: "NS", uuid: "1" }} error />
    <Chip label="With icon" icon={faTag} error />
    <Chip
      label="With image"
      img={{
        src: "https://scribehow.com/favicon.ico",
        alt: "Scribe Favicon",
      }}
      error
    />
    <Chip label="Clickable" onClick={() => null} onRemove={() => null} error />
  </div>
);

Click events

To make the chip clickable, pass an onClick prop. Clickable chips have hover styles and a pointer cursor.

Passing an onRemove prop will add a remove button to the chip.

import { useState } from "react";
import { Chip } from "stylus-ui/Chip";
import { useToast } from "stylus-ui/Toast";
import { faArrowsRotate } from "@fortawesome/pro-regular-svg-icons";

const chips = [
  { label: "Google", favicon: "https://www.google.com/favicon.ico" },
  { label: "GitHub", favicon: "https://github.com/favicon.ico" },
  { label: "Scribe", favicon: "https://scribehow.com/favicon.ico" },
];

export default () => {
  const { toast } = useToast();
  const [hiddenChips, setHiddenChips] = useState<number[]>([]);

  return (
    <div className="flex flex-wrap gap-1.5">
      {chips.map(
        (chip, i) =>
          !hiddenChips.includes(i) && (
            <Chip
              label={chip.label}
              img={{ src: chip.favicon, alt: `${chip.label} favicon` }}
              onClick={() => toast({ title: `Clicked ${chip.label}` })}
              onRemove={() => setHiddenChips((prev) => [...prev, i])}
            />
          ),
      )}
      {hiddenChips.length > 0 && (
        <Chip
          icon={faArrowsRotate}
          label="Reset"
          onClick={() => setHiddenChips([])}
        />
      )}
    </div>
  );
};

Editable

To create an editable chip, import <EditableChip>. Under the hood, EditableChip is a regular HTML input element—you can pass in any HTML input attributes.

Chip

import { Chip, EditableChip } from "stylus-ui/Chip";

export default () => (
  <div className="flex flex-wrap gap-1.5">
    <Chip label="Chip" />
    <EditableChip placeholder="Edit me!" />
  </div>
);

Editable list

Here’s a minimal example of how to create an editable list of Chips.

Chip 1

Chip 2

Chip 3

import { useState } from "react";
import { Chip, EditableChip } from "stylus-ui/Chip";

export default () => {
  const [chips, setChips] = useState<string[]>(["Chip 1", "Chip 2", "Chip 3"]);
  const [value, setValue] = useState<string>("");

  const handleRemove = (chip: string) => {
    setChips((prev) => prev.filter((c) => c !== chip));
  };

  // Clear the input on `escape`
  const handleCancel = () => {
    setValue("");
  };

  // Add the new chip to the list on `enter`
  const handleSave = () => {
    if (value) {
      setChips((prev) => [...prev, value]);
      setValue("");
    }
  };

  return (
    <div className="flex flex-wrap gap-1.5">
      {chips.map((chip) => (
        <Chip label={chip} onRemove={() => handleRemove(chip)} />
      ))}
      <EditableChip
        placeholder="Add a chip"
        value={value}
        onChange={setValue}
        onCancel={handleCancel}
        onSave={handleSave}
      />
    </div>
  );
};

Editable toggle

Sometimes you may want to toggle between an editable and non-editable chip. Use <EditableToggleChip> and pass in chipProps and editableProps. The component will automatically handle toggling between states when the chip is clicked. Pressing enter or clicking away will save the value.

import { useState } from "react";
import { EditableToggleChip } from "stylus-ui/Chip";

export default () => {
  const [chips, setChips] = useState<string[]>([
    "https://google.com",
    "https://github.com",
    "https://scribehow.com",
  ]);

  const handleSave = (value: string, index: number) => {
    setChips((prev) => {
      const newChips = [...prev];
      newChips[index] = value;
      return newChips;
    });
  };

  return (
    <div className="flex flex-wrap gap-1.5">
      {chips.map((chip, index) => (
        <EditableToggleChip
          key={chip}
          chipProps={{
            label: chip,
            img: { src: `${chip}/favicon.ico`, alt: `${chip} favicon` },
          }}
          editableProps={{
            defaultValue: chip,
            onSave: (value) => handleSave(value, index),
          }}
        />
      ))}
    </div>
  );
};

API Reference

`Chip`

A small, interactive element that represents an entity.

`label`

Required

string

Text shown in the chip.

`avatar`

Omit<AvatarProps, "size" | "theme">

Avatar shown before the label; size and theme are set by the chip.

`error`

boolean = false

Show error state (red ring and background).

`icon`

IconDefinition

Icon shown before the label.

`img`

{ src: string; alt: string; }

Image shown before the label (src and alt).

`onClick`

MouseEventHandler<HTMLButtonElement> & MouseEventHandler<HTMLDivElement | HTMLButtonElement>

Called when the chip is clicked (makes it look clickable).

`onRemove`

MouseEventHandler<HTMLButtonElement>

Called when remove is clicked; when set, shows a remove control.

`theme`

"light" | "dark" = "light"

Visual theme.

`EditableChip`

`className`

string

Optional class for the wrapper.

`defaultValue`

string

Uncontrolled initial value.

`onCancel`

() => void

Called when the user cancels (Escape).

`onChange`

(value: string) => void

Called when the input value changes.

`onClickAway`

(value: string) => void

Called when the user clicks outside the chip (commits the current value).

`onSave`

(value: string) => void

Called when the user commits the edit (Enter, blur, or click away).

`placeholder`

string

Placeholder when the value is empty.

`theme`

"light" | "dark" = "light"

Visual theme.

`value`

string

Controlled value.

`EditableToggleChip`

`chipProps`

Required

Omit<ChipProps, "theme">

Props for the chip when not editing (label, icon, onRemove, etc.); theme is set by the parent.

`editableProps`

Required

Omit<EditableChipProps, "onChange" | "theme" | "onCancel">

Props for the inline editor (defaultValue, onSave, placeholder, etc.); theme and cancel/change are handled internally.

`theme`

"light" | "dark" = "light"

Visual theme for both chip and editor.