Skip to content
DOL Studio

Chip

Design: Stable Code: Coded formpillmulti-choice 4 Figma sets Chip select

Live preview

Status filter

Import & files

Import
import { Chip } from "@dol/ui/filter-chips";
Source file
packages/@dol/ui/src/filter-chips/FilterChips.tsx

Spec

Spec Props · Axes · Size · Usage

Props

Prop Type Default Description
type 'checkbox' | 'radio' 'checkbox' —
tone 'brand' | 'neutral' 'brand' —
size 'md' | 'lg' | '4xl' 'md' —
radius 'block' | 'round' 'block' —
layout 'left-check' | 'right-check' 'left-check' —
align 'left' | 'center' 'left' —
width 'hug' | 'fill' 'hug' —
transparent boolean false —
label / children ReactNode — —
description ReactNode — —
icon ReactNode — —
showControl boolean true —
checked / defaultChecked / onChange / name / value / disabled native input props — —

Variants · Tones · Sizes

Variants
checkboxradiosolidtransparentleft-checkright-checkleft-aligncenter-alignblock-radiusround-radiuswith-descriptionwithout-descriptionwith-iconwithout-iconwith-controlwithout-control
Tones
brandneutral
Sizes
mdlg4xl

Size spec

Size Height Pad LR Pad TB Radius Text Icon
block/md 40 12 10 14 14 20
block/lg 52 20 14 16 14 20
block/4xl 72 20 24 20 16 20
round/md 40 12 10 999 14 20
round/lg 52 20 14 999 14 20
round/4xl 72 20 24 999 16 20

Figma `.Chip select/Size` node 32638:695. Center-aligned round variants use 40px side padding and absolute check/radio positioning.

Usage

Use ChipSelect for selectable chips and compact option cards where the whole chip is the target. Use Checkbox/Radio for dense lists, Badge for non-interactive labels, and Select/Combobox for long option sets.

Examples

Examples 6
  • Core
  • Size options
  • Radius options
  • Control options
  • Icon options
  • Complex layout - description

Figma source

Figma source 4 sets
Page
Checkbox, Radio, Chip
Sets
4
Primary set
Chip select · 144 variants Open in Figma →
Showing: Chip select
3 other sets

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Chip
Slug: `chip`
Domain: general · Category: input
Design: stable · Code: coded


## Description
Pill-shaped multi-select primitive (4 sets, 200 variants). Two flavors: bare `Chip` (label only) + `Chip select` (label + state machinery for filter/segmented use). Use Group spacing rules same as Checkbox/Radio for consistent multi-choice layouts.


## Import
```ts
import { Chip } from "@dol/ui/filter-chips";
```
Source: `packages/@dol/ui/src/filter-chips/FilterChips.tsx`


## Props (13)
| Prop | Type | Default | Description |
|---|---|---|---|
| `type` | `'checkbox' | 'radio'` | 'checkbox' |  |
| `tone` | `'brand' | 'neutral'` | 'brand' |  |
| `size` | `'md' | 'lg' | '4xl'` | 'md' |  |
| `radius` | `'block' | 'round'` | 'block' |  |
| `layout` | `'left-check' | 'right-check'` | 'left-check' |  |
| `align` | `'left' | 'center'` | 'left' |  |
| `width` | `'hug' | 'fill'` | 'hug' |  |
| `transparent` | `boolean` | false |  |
| `label / children` | `ReactNode` | — |  |
| `description` | `ReactNode` | — |  |
| `icon` | `ReactNode` | — |  |
| `showControl` | `boolean` | true |  |
| `checked / defaultChecked / onChange / name / value / disabled` | `native input props` | — |  |


## Axes
Variants: `checkbox`, `radio`, `solid`, `transparent`, `left-check`, `right-check`, `left-align`, `center-align`, `block-radius`, `round-radius`, `with-description`, `without-description`, `with-icon`, `without-icon`, `with-control`, `without-control`
Tones: `brand`, `neutral`
Sizes: `md`, `lg`, `4xl`


## Usage
Use ChipSelect for selectable chips and compact option cards where the whole chip is the target. Use Checkbox/Radio for dense lists, Badge for non-interactive labels, and Select/Combobox for long option sets.


## Examples
- **Core**
- **Size options**
- **Radius options**
- **Control options**
- **Icon options**
- **Complex layout - description**


## Figma source
Page: Checkbox, Radio, Chip
Sets: 4
Primary: Chip select
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=32638-682

Related

  • Label

    Checkbox

    Coded

  • Input

    Coded

  • Select input

    Coded

  • Uploader

    Coded

  • DatePicker

    Coded

  • Slider

    Coded

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).