ChipGroup

formnew

The same selection list as CheckboxGroup, wearing pill-shaped chips instead. Identical props, so you can swap one for the other by renaming the component. It renders only the chips — no card, heading or button — so it slots straight into a form or a wizard step. Set multiple={false} to make it behave like a radio group.

Set Company Working days

Select your company working days, and uncheck non-working days

1Installation

Install the package:

$npm install piece-ui@alpha

Import the component:

tsx

1import { ChipGroup } from "piece-ui";

2Usage

Give it a list — that's it

tsx

1import { ChipGroup } from "piece-ui";
2
3export default function Example() {
4  return (
5    <ChipGroup
6      options={["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]}
7      defaultValue={["Monday", "Tuesday"]}
8      onChange={(days) => console.log(days)}
9    />
10  );
11}

Single select

tsx

1import { ChipGroup } from "piece-ui";
2
3export default function Example() {
4  return (
5    <ChipGroup
6      options={["Daily", "Weekly", "Monthly"]}
7      defaultValue={["Weekly"]}
8      multiple={false}
9      onChange={([plan]) => console.log(plan)}
10    />
11  );
12}

Restyled — colour, size, weight

tsx

1import { ChipGroup } from "piece-ui";
2
3export default function Example() {
4  return (
5    <ChipGroup
6      options={["Monday", "Tuesday", "Wednesday"]}
7      defaultValue={["Monday"]}
8      accentColor="#10b981"
9      chipColor="#f9fafb"
10      borderColor="#e5e7eb"
11      labelColor="#374151"
12      size="lg"
13      weight="bold"
14    />
15  );
16}

As one field in a form — nothing else comes with it

tsx

1import { useState } from "react";
2import { ChipGroup } from "piece-ui";
3
4const DAYS = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
5
6// ChipGroup renders ONLY the chips — it is just another form field.
7export default function SettingsForm() {
8  const [days, setDays] = useState(["Monday", "Tuesday"]);
9
10  return (
11    <form onSubmit={(e) => e.preventDefault()}>
12      <label className="mb-2 block font-medium">Working days</label>
13      <ChipGroup options={DAYS} value={days} onChange={setDays} />
14
15      <label className="mt-6 mb-2 block font-medium">Timezone</label>
16      <input name="tz" className="w-full rounded-lg border px-3 py-2" />
17
18      <button type="submit" className="mt-6">Save</button>
19    </form>
20  );
21}

3Props

Prop	Type	Default	Description
`options`req	`(string \| { label, value?, disabled? })[]`	—	The list to render. Plain strings work; use objects for per-item control.
`value`	`string[]`	—	Controlled selection. Omit to let the component manage its own state.
`defaultValue`	`string[]`	`[]`	Initial selection when uncontrolled.
`onChange`	`(value: string[]) => void`	—	Fires with the full next selection whenever it changes.
`onSelect`	`(value: string, selected: boolean) => void`	—	Fires for the single chip that was just toggled.
`multiple`	`boolean`	`true`	Set false to behave like a radio group — only one chip at a time.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Chip padding and label size.
`weight`	`"normal" \| "medium" \| "semibold" \| "bold"`	`"semibold"`	Label font weight.
`accentColor`	`string`	`"#3b82f6"`	Background of a selected chip.
`selectedLabelColor`	`string`	`"#ffffff"`	Label colour of a selected chip.
`chipColor`	`string`	`"transparent"`	Background of an unselected chip.
`borderColor`	`string`	—	Border colour of an unselected chip.
`labelColor`	`string`	`"inherit"`	Label colour of an unselected chip.
`fontFamily`	`string`	—	Overrides the font for the whole group.
`disabled`	`boolean`	`false`	Disables every chip at once.

CheckboxGroup

Button