Chip

구조는 당근 SEED Chip(Apache-2.0)을 따른다 — 알약(Container) · 글(Label) · 앞 아이콘 · 뒤 아이콘. 하나 고르기는 라디오(Chip.RadioItem), 여럿 고르기는 체크박스(Chip.Toggle), 제안 · 여는 칩은 버튼(Chip.Button)이다. 값은 groo 토큰이고, SEED 와 다른 자리는 맨 아래 "SEED 와 다른 점" 에 적었다(2026-10-01 · 02 사용자 결정).

수치 원본은 chip.yaml이다. 수치 표 자리([표: …])와 그림 자리([그림: …])는 사이트가 그 파일로 그린다 — GitHub 에서는 그 파일 · 그림 코드로 가는 링크로 보인다.

직접 골라 보기제목 링크 복사

변형 · 크기 · 고르기 방식 · 아이콘 · 상태를 고르면 스펙대로 그린 칩 묶음과 그 코드가 바뀐다. 실제로 누를 수 있다.

import { Field } from "@/components/ui/field"
import { ChipRadio, ChipRadioGroup } from "@/components/ui/chip"

<Field label="거래 종류">
  <ChipRadioGroup value={type} onValueChange={setType}>
    <ChipRadio variant="outlineStrong" value="expense">지출</ChipRadio>
    <ChipRadio variant="outlineStrong" value="income">수입</ChipRadio>
    <ChipRadio variant="outlineStrong" value="transfer">이체</ChipRadio>
  </ChipRadioGroup>
</Field>

Anatomy제목 링크 복사

부위

Properties제목 링크 복사

Variant제목 링크 복사

세 가지다. 안 고른 Outline Strong 과 Outline Weak 는 똑같고, 고르면 갈린다.

고른 칩은 브랜드 색이 아니라 중립색으로 칠한다 — 고른 칩이 여럿 보여도 브랜드 버튼(주요 동작)과 다투지 않고, Desk · HR 이 같다. Solid 의 옅은 바탕은 투명한 bg-neutral-weak-alpha(검정 4.7% · 다크 흰 12.5%)라 놓인 바탕에 섞여 회색 바닥(bg-layer-basement) 위에서도 보인다 — 회색 위 1.11:1 · 흰 위 1.11:1 · 다크 1.47:1(v120, 2026-10-16 사용자 결정 — 기초 웹 01-040 B). 불투명 bg-neutral-weak 였을 때는 회색 바닥과 같은 색(1.00:1)이라 흰 표면 위에서만 썼다.

변형 · 고름 · 크기 × 모양 — 바뀌는 값

Size제목 링크 복사

small 32 · medium 36 (기본) · large 40. 글은 세 크기 모두 14 · 500(t4)이고, 글과 가장자리 사이는 12 · 14 · 16, 앞 아이콘 14 · 16 · 16 과 글 사이 6, 칩 사이 8(spacing-between-chips)이다. 기본은 폰 폼에서도 36 이고, small 은 촘촘한 줄(1280 이상 데스크톱의 필터 · 표 위), large 는 화면의 주인공 고르기에만 쓴다. 누르는 영역은 Button 처럼 가로 · 세로 44 까지 넓힌다(보이는 칩은 그대로 — 글이 있는 칩은 최소 폭이 이미 44 이상이고, 아이콘만 있는 칩은 가로도 44).

크기

큰 글자제목 링크 복사

글은 글자 크기 설정을 따르고, 글이 상자를 넘지 않는다. 상자가 커지는 방법은 플랫폼마다 다르다(2026-10-17 사용자 결정 — 03-E 결정 1 C).

• 웹 — 높이 · 여백 · 아이콘 · 지우기가 rem 이라 글자 크기 설정의 배율대로 커진다. 200% 에서 medium 칩 72 · 지우기 28.
• 앱 — 높이가 최소 높이다. 글이 커지면 칩이 글 줄 높이 + 위아래 (높이 − 19) ÷ 2 로 늘어나고(medium 200% 에서 38 + 8.5 × 2 = 55), 좌우 여백 · 아이콘 · 지우기는 그대로다. 높이를 고정해 글이 상자를 넘게 두지 않는다.

같은 설정에서 웹 칩이 앱보다 크다(72 대 55). 보통 글자(100%)에서는 두 플랫폼 모두 32 · 36 · 40 이다. 앱 상자에도 배율을 곱하는 것(A) · 두 플랫폼 모두 px 최소 크기(B — SEED 는 상자 px · 글자 1.5배 상한)는 고르지 않았다.

State제목 링크 복사

상태 — Outline Weak

상태 — Outline Weak 고름

상태 — Solid

상태 — Solid 고름

상태 — Outline Strong 고름

상태 — 입력값 칩의 지우기 · 묶음

묶음

가로 스크롤 줄

모션

쓰임 넷제목 링크 복사

aria-pressed 는 쓰지 않는다(SEED) — 켜고 끄는 단추 하나는 Toggle(아이콘 단추 — 2026-10-09)이다.

Guidelines제목 링크 복사

하나 고르기 — "전체" · "없음" 은 선택지로제목 링크 복사

하나 고르기 칩은 라디오다 — 고른 칩을 다시 눌러도 풀리지 않고, 늘 하나가 골라져 있다. 거르기의 "전체" 는 맨 앞 선택지로 둔다(글은 "전체" 하나 — "혜택 전체" 처럼 바꾸지 않는다). 칩으로 거르는 축은 태그처럼 개수가 바뀌거나 5개 이상인 축이다 — 개수가 정해진 2 ~ 4가지 보기(프리셋 정렬 많이 쓴 순 · 최근 사용 · 이름순)는 Segmented Control(그 차례에)이다. 폼은 기본값을 골라 두거나, "없음" 이 답이면 "{칸 이름} 없음" 을 맨 앞에 둔다(Select 와 같은 규칙).

여럿 고르기 — 다른 칩을 바꾸는 칩을 두지 않는다제목 링크 복사

여럿 고르기 칩은 체크박스다 — 다시 누르면 풀린다. "전체 선택" 처럼 다른 칩을 바꾸는 칩은 두지 않는다. 거르기에서 하나도 안 고르면 "조건 없음"(전부 보인다)이고, 폼에서 꼭 골라야 하면 Field 의 오류로 알린다. 몇 개까지 고를 수 있는지는 Field 설명에 적는다.

필터 바 — 조건마다 칩제목 링크 복사

목록 위 한 줄(가로 스크롤 · 끝 흐림)에 조건마다 칩을 하나씩 둔다. 칩은 뒤에 아래 화살표를 달고, 누르면 그 조건만 시트(1280 미만) · 팝오버(1280 이상)로 연다. 걸린 조건의 칩은 고른 모습(짙은 채움)에 값을 요약하고("식비 외 2개" — Select 의 여럿 고른 값과 같은 꼴), 하나라도 걸리면 맨 앞에 지우기 칩(↺, 아이콘만 — 이름 "필터 지우기")을 둔다. 걸린 조건 칩의 글이 곧 지금 조건이라 따로 "필터 2" 같은 개수를 두지 않는다.

빼기 — 칩은 두 상태만제목 링크 복사

칩은 고름 · 안 고름 둘뿐이다 — 누를 때마다 고름 → 빼고 → 해제를 도는 3상태 칩을 두지 않는다. 빼는 조건이 필요하면 조건마다 "고른 것만 · 고른 것 빼고" 를 먼저 고르고(하나 고르기 칩 둘), 아래에서 여럿 고른다 — 한 조건 안에서 넣기 · 빼기를 섞지 않는다.

제안 — 고른 표시가 없다제목 링크 복사

제안 칩(빠른 금액 · 빠른 기간)은 누르면 칸에 값을 넣는 버튼이다 — 고른 모습이 없고, 지금 값은 칸이 보인다. 다시 누르면 같은 값을 다시 넣는다(고친 값을 덮어쓰지 않게, 여러 칸을 채우는 제안은 칸을 비웠을 때만 채우거나 덮어쓰기 전에 묻는다). 프리셋 칩은 제안이 아니다 — 다시 누르면 해제하는 토글이라 적용한 칩만 고른 모양이고, 목록 제목이 "{이름} 적용됨" 으로 함께 알린다(2026-10-31).

Solid 는 어느 바탕에서나제목 링크 복사

Solid 의 옅은 바탕은 투명한 bg-neutral-weak-alpha 라 흰 표면에서도, 회색 바닥(bg-layer-basement) 위에서도 보인다(1.11:1 · 다크 1.47:1 — v120). 불투명 bg-neutral-weak 로 칠하면 회색 바닥과 같은 색이라 칩이 사라진다 — 칩 바탕에 불투명 약한 배경을 쓰지 않는다(DESIGN.md Elevation 의 "바닥 위의 채움", 2026-10-16 사용자 결정 — 기초 웹 01-040 B). 막힌 Solid 칩도 같다 — 바탕은 그대로 두고 글 · 아이콘만 fg-disabled 로 바꾼다(bg-disabled 도 회색 바닥과 같은 gray-200 — 2026-10-17 사용자 결정 03-B 결정 1 A). 막힌 칩과 안 고른 칩은 바탕이 아니라 글 색으로 갈린다. 회색 바닥 위 줄에서 막힌 칩을 숨기는 규칙(B) · bg-disabled 에 1px 테두리(C)는 고르지 않았다.

글제목 링크 복사

• 명사로 짧게, 한 줄 — 칩은 줄바꿈하지 않고 글만큼 넓어진다. 한 묶음의 글 길이 · 말투를 맞춘다.
• 여럿을 한 칩에 줄이면 "식비 외 2개"(첫 값 + 나머지 수 — "외" 는 앞의 값을 뺀 수). 개수만 쓰면 "3개 고름".
• 코드값(Y · N · ADMIN)을 글로 내지 않는다(Writing).

줄보다 긴 칩 — 줄 폭에서 말줄임제목 링크 복사

넣은 값 · 사람 이름처럼 사용자가 친 글은 길이를 고를 수 없고, 큰 글자에서는 짧은 글도 길어진다. 칩이 놓인 줄보다 넓어지면 칩은 줄 폭에서 멈추고 글 끝을 "…" 로 줄인다 — 앞 · 뒤 아이콘과 입력값 칩의 지우기 × 는 줄지 않고 남는다. 가로 스크롤 줄(필터 바 · 제안 줄)과 Chip Tabs 도 같다 — 칩 하나는 보이는 줄 폭(화면 여백 안)을 넘지 않는다(2026-10-17 사용자 결정 — 03-E 후속). 여는 칩의 아래 화살표도 남는다. 보조 기술 · 지우기 이름("{글} 지우기")은 글 전체를 읽고, 넣은 값은 입력칸에서 다시 볼 수 있다. 줄보다 짧은 칩은 그대로 글만큼 넓다(2026-10-17 사용자 결정 — 03-E 결정 2 A). 칩 안에서 줄바꿈(B — 칩끼리 높이가 갈린다) · 큰 글자에서 가로 스크롤 줄로 바꾸기(C)는 고르지 않았다.

묶음 배치제목 링크 복사

칩 사이는 8(spacing-between-chips)이다. 폼 · 시트 안의 고르기 묶음은 줄바꿈하고(줄 사이 8), 목록 위 필터 바 · 제안 줄은 한 줄 가로 스크롤로 둔다 — 줄을 화면 끝까지 내고 안쪽 여백을 화면 여백(spacing-global-gutter)만큼 둬 스크롤해도 첫 칩이 여백에서 시작한다(이미 화면 여백 안에 두는 코드는 bleed 로 줄을 화면 끝까지 낸다). 줄의 양 끝은 Scroll Fog 로 늘 흐린다 — 좌우 20, 스크롤 위치와 상관없이 켜져 있고, 안쪽 여백(화면 여백 24)이 흐림보다 넓어 처음 · 끝의 칩은 흐리지 않는다.

탭 · Segmented 와 나누기제목 링크 복사

칩은 값을 고르거나 거르는 자리다. 다른 구역으로 옮기는 2차 탭은 Tabs 의 칩 모양(Chip Tabs), 같은 내용을 2 ~ 4가지로 바로 거르거나 다르게 보는 자리는 Segmented Control 이다(그 차례에). 한 화면에 칩 모양 탭과 필터 칩이 같이 있으면 탭을 Line 으로 둔다 — 같은 모양이 둘이면 무엇이 탭인지 알 수 없다.

건수 · 큰 글자제목 링크 복사

• 건수 — 하나 고르기 칩의 건수("업무 5")는 글자와 다른 색(fg-neutral-subtle, 고른 칩은 고른 글자 색)으로 뒤에 붙인다.
• 큰 글자 — 글이 있는 칩의 높이는 글자 크기를 따른다. 위아래 여백 = (높이 − 줄 높이 19) ÷ 2 — 글자 100% 에서는 정한 높이 그대로이고, 200% 에서 글이 위아래에 붙지 않는다.

코드제목 링크 복사

레시피 recipes/shadcn/components/ui/chip.tsx 를 쓴다. 고르기 묶음은 Field 안에 둔다(라벨이 묶음의 이름). 아래 미리보기는 스펙 값으로 그린 모습이다.

하나 고르기제목 링크 복사

import { Field } from "@/components/ui/field"
import { ChipRadio, ChipRadioGroup } from "@/components/ui/chip"

<Field label="거래 종류">
  <ChipRadioGroup value={type} onValueChange={setType}>
    <ChipRadio variant="outlineStrong" value="expense">지출</ChipRadio>
    <ChipRadio variant="outlineStrong" value="income">수입</ChipRadio>
    <ChipRadio variant="outlineStrong" value="transfer">이체</ChipRadio>
  </ChipRadioGroup>
</Field>

여럿 고르기제목 링크 복사

import { ChipGroup, ChipToggle } from "@/components/ui/chip"

<Field label="알림" description="고른 때마다 알려줘요.">
  <ChipGroup>
    {["당일", "1일 전", "3일 전", "1주 전"].map((t) => (
      <ChipToggle key={t} checked={alarms.includes(t)} onCheckedChange={(on) => toggle(t, on)}>
        {t}
      </ChipToggle>
    ))}
  </ChipGroup>
</Field>

필터 바제목 링크 복사

import { ChevronDown, RotateCcw } from "lucide-react"
import { Chip, ChipGroup } from "@/components/ui/chip"

<ChipGroup layout="scroll" bleed aria-label="거래 거르기">
  {active > 0 && <Chip variant="outlineStrong" layout="iconOnly" aria-label="필터 지우기" onClick={reset}><RotateCcw /></Chip>}
  <Chip variant="solid" selected={!!period} suffixIcon={<ChevronDown />} aria-haspopup="dialog" onClick={() => open("period")}>
    {period ? periodLabel : "기간"}
  </Chip>
  <Chip variant="solid" selected={cats.length > 0} suffixIcon={<ChevronDown />} aria-haspopup="dialog" onClick={() => open("category")}>
    {cats.length ? summarize(cats) : "카테고리"}
  </Chip>
</ChipGroup>

제안 · 입력값제목 링크 복사

import { Chip, ChipGroup, InputChip } from "@/components/ui/chip"

<ChipGroup aria-label="빠른 금액">
  {[100000, 300000, 500000].map((v) => (
    <Chip key={v} variant="solid" onClick={() => setAmount(v)}>{formatMan(v)}</Chip>
  ))}
</ChipGroup>

<ChipGroup aria-label="참여자">
  {people.map((p) => <InputChip key={p.id} onRemove={() => removePerson(p.id)}>{p.name}</InputChip>)}
</ChipGroup>

Behavior제목 링크 복사

Accessibility제목 링크 복사

Do / Don't제목 링크 복사

✅ Do제목 링크 복사

• 2 ~ 4개 짧은 폼 값은 칩으로 — 고르기 묶음은 Field 로 감싸 이름을 단다.
• 하나 고르기의 "전체" 는 맨 앞 선택지로, 폼은 기본값을 골라 둔다.
• 필터 바는 조건마다 칩 하나, 걸린 조건은 고른 모습 + 값 요약.
• 고른 칩은 중립색으로.
• Solid 바탕은 투명한 bg-neutral-weak-alpha 로 — 회색 바닥 위에서도 보인다.

❌ Don't제목 링크 복사

• 고른 칩을 브랜드 색으로 칠하기.
• "전체 선택" 처럼 다른 칩을 바꾸는 칩.
• 누를 때마다 고름 → 빼고 → 해제를 도는 3상태 칩.
• 제안 칩을 고른 모습으로 남기기.
• 칩 모양 탭과 필터 칩을 한 화면에 같은 모양으로.
• 누를 수 없는 표시를 칩 모양으로(Badge).

Specification제목 링크 복사

chip.yaml 의 규칙을 하나도 빼지 않고 조건마다 그린다 — 웹 · 앱이 Chip 을 만들 때 이 값을 그대로 쓴다. 조건이 없는 Base 가 모든 조합에 걸리고, 뒤의 규칙이 앞의 같은 값을 덮는다. 상태는 enabled 에서 바뀌는 값만 적었다.

SEED 와 다른 점제목 링크 복사

• 반투명 색을 불투명 짝으로(v102) — Outline 테두리 stroke-neutral-weak, 누름 bg-layer-default-pressed. Solid 바탕은 SEED 그대로 투명한 bg-neutral-weak-alpha(누름 -pressed)다 — v102 에는 검사기가 8자리 hex 를 받지 않아 불투명 bg-neutral-weak 로 두고 흰 표면 위에서만 썼는데, 회색 바닥 위 필터 바에서 사라져 v120 에 되돌렸다(2026-10-16 사용자 결정 — 기초 웹 01-040 B).
• Outline Strong 을 고르면 테두리를 지운다 — SEED 는 짙은 채움 위에 옅은 테두리가 남는다(SEED Chip Tabs 는 지운다).
• 비활성은 흐리게 하지 않는다(v106) — SEED 는 불투명도 0.5. 막힌 Solid(안 고름)는 SEED 처럼 바탕 bg-neutral-weak-alpha 를 그대로 두고, 흐림 대신 글 · 아이콘만 fg-disabled 다(2026-10-17 사용자 결정 — 03-B 결정 1 A). 고른 채 막힌 칩은 짙은 1px stroke-neutral-solid 로 고른 것을 남긴다(사용자 결정 2026-10-02).
• 줄보다 긴 칩은 줄 폭에서 말줄임(2026-10-17 사용자 결정 — 03-E 결정 2 A) — SEED 는 white-space: nowrap 만 있고 최대 폭 · 말줄임이 없다(글자를 1.5배에서 묶어 넘침이 드물다).
• 큰 글자 — SEED 는 상자가 px 이고 글자를 1.5배(일부 1.35)에서 묶는다. groo 는 글자 상한을 두지 않고(03-D 결정 1), 웹은 상자도 rem 으로 커지며 앱은 최소 높이가 글을 따라 늘어난다(2026-10-17 사용자 결정 — 03-E 결정 1 C).
• 웹의 호버는 누름과 같은 바탕(v106 — SEED 도 마우스에서는 같다), 누르는 영역은 가로 · 세로 44 까지 넓힌다(SEED 에 규정 없음 — Button 과 같다).
• 입력값 칩 · 지우기 버튼 · 필터 바의 걸린 조건 모습을 정했다 — SEED 는 "Suffix 에 Remove 버튼", "Filter Bar 템플릿" 이라고만 하고 치수 · 모양이 없다.
• 아이콘은 lucide 선 아이콘(v106) — 여는 칩 chevron-down, 지우기 x, 필터 지우기 rotate-ccw.

Migration notes제목 링크 복사

2026-10-17 — 큰 글자 · 줄보다 긴 칩 · Home · End · 막힌 Solid(03-E · 03-B 사용자 결정)제목 링크 복사

구현 조사에서 사용자가 정했다(비교 페이지 03-E https://claude.ai/artifact/FKYaqu7zAR5T2HVwFnx5oD · 03-B https://claude.ai/artifact/SZwwW7UK1FxtZynvYBFLLx). 옛 스펙은 chip.history/v-pre-03e-03b.*.

• 큰 글자(03-E 결정 1 C) — 웹은 그대로(rem). 앱 PChip 은 높이를 최소 높이로 — 지금 minHeight: m.height, maxHeight: m.height(p_chip.dart:214-217)라 200% 에서 글 38 이 36 상자를 넘는다. 최대 높이를 걷고 위아래 (높이 − 19) ÷ 2 를 둔다.
• 줄보다 긴 칩(03-E 결정 2 A · 후속) — root.maxWidth 100% · label.overflow 말줄임. 줄바꿈 묶음 · 가로 스크롤 줄 · Chip Tabs 모두(스크롤 줄은 보이는 줄 폭). 웹은 칩이 줄 밖으로 나가 화면이 옆으로 밀리고, 앱은 글이 칩 윤곽 밖으로 넘쳐 지우기 × 가 잘린다(200% · 360 에서 131px). 칩 최대 폭 = 줄 폭, 글만 줄고 아이콘 · 지우기는 남게. 레시피 · 예제는 아직 그리지 않았다 — 칩 글을 따로 감싸는 칸이 입력값 칩에만 있다.
• Home · End(03-E 결정 3 A) — 웹 공용 라디오 묶음(Chip 하나 고르기 · Radio Group · Segmented Control · Select Box 하나 고르기 · List 라디오)은 Radix RovingFocusGroup 이 Home · End 로 초점만 옮겨 초점과 고른 것이 갈렸다. 레시피는 묶음에서 라디오의 Home · End · PageUp · PageDown 을 막는다(ignoreRadioJumpKeys — radio-group.tsx). 앱은 바뀌는 것 없음.
• 막힌 Solid(03-B 결정 1 A) — 레시피 · 예제 · 미리보기의 Solid 안 고름 막힘 바탕을 bg-disabled → bg-neutral-weak-alpha 로. 웹 · 앱 ds 의 Chip 도 같게(지금 웹 chip-variants.ts 는 v120 전이라 안 고른 칩도 bg-neutral-weak).

2026-10-02 — 새로 둔다(SEED Chip)제목 링크 복사

사용자가 비교 페이지에서 여덟 가지를 모두 SEED 로 정했다 — 칩이 맡는 일 넷(고르기 · 제안 · 필터 바 · 입력값) · 32 · 36 · 40 기본 36 · 고른 색 중립 · 변형 셋 · 하나 고르기는 라디오("전체" 맨 앞) · 필터 바(조건마다 칩, 걸린 조건은 짙은 채움 + 값 요약, 맨 앞 지우기) · 3상태를 걷고 "고른 것만 · 고른 것 빼고" · 제안 칩은 고른 표시 없음. 고른 채 막힌 칩은 짙은 1px 를 남긴다. 옛 DESIGN.md 의 Tag / Chip(v73)을 대신한다.

제품은 앱 적용 단계에서 옮긴다(2026-10-01 조사 — 세 제품 코드를 읽고 Desk 웹 · HR 은 크로미움에 띄워 쟀다).

• Desk 웹 — 공용 Chip 2곳 · 칩 모양 탭 12 · 폼 값 탭 트랙 15 · ToggleGroup 9 · 손으로 만든 칩 18종. 높이 11가지(28 ~ 46) · 모서리 4 · 8 · 16 · full · 글자 12 ~ 14, 고른 표시 8가지. 다크에서 브랜드 채움이 바탕과 1.73 ~ 1.96:1, ToggleGroup 고름 1.12:1. 폼 값 · 필터 27곳이 탭으로 읽힌다(화살표마다 언어가 바뀌고 이메일 주기가 저장된다). 친구 추가 칩이 토글로 읽히고, 지우기 × 이름이 모두 "초기화"(14 · 17). 가계부 "전체 · 지출 · 수입" 칩은 필터 대화상자를 걸면 효과가 없어지는데 고른 표시는 남는다.
• Desk 앱 — PChip 10 · PTypeChip 2 · PToggle 3 · PCategoryTile 4 · 화면 전용 칩 13종 · PTabs 37. 높이 28 ~ 43.5 · 글자 13.5(토큰 밖) · 고른 표시 11가지. PChip 은 누르거나 포커스해도 표시가 없고, 켜지면 크기가 변하는 칩이 둘이다. 거래 종류 둘 다 끄면 엉뚱한 "수입" 칩이 뜬다(D1). 기관 칩 글자 70곳 중 12곳이 4.5:1 미만(최저 2.42). 요일 켬 · 끔 1.02:1. 3상태 필터의 "빼고" 4.00:1. 키보드로 못 닿는 칩 9종.
• HR 웹 — 칩이 없다. 2 ~ 4개 폼 값 16칸이 모두 Select(→ Chip), 예 / 아니오 3칸(→ Checkbox), 칩처럼 생긴 Badge 49 + 알약 4 는 누를 수 없다. 업무 보고 필터 개수가 늘 2(초기화가 비활성이 안 됨), 캘린더 필터는 전체에서 하나를 누르면 그것만 남는다.