컴포넌트FOX · Chip

칩

목록을 걸러 보는 작은 선택 단추예요. 하나만 고르는 필터와 여러 개를 고르는 필터가 있고, 칩이 많으면 한 줄로 두고 옆으로 밀어 봐요.

하나만 고르기

칩을 누르면 앞에서 고른 칩은 풀려요. 항상 하나는 켜져 있어야 하니 첫 칩을 「전체」로 둬요.

SINGLE

<ChipList mode="single" defaultValue={["all"]}>
  <Chip value="all">전체</Chip>
  <Chip value="food">식비</Chip>
  <Chip value="move">교통</Chip>
</ChipList>

여러 개 고르기

누를 때마다 켜고 꺼요. 고른 칩이 하나도 없으면 필터를 쓰지 않은 것과 같아요.

MULTIPLE

<ChipList mode="multiple" defaultValue={["food", "shop"]}>
  <Chip value="food">식비</Chip>
  <Chip value="move">교통</Chip>
  <Chip value="shop">쇼핑</Chip>
</ChipList>

가로로 밀어 보기

칩이 화면보다 길면 줄을 바꾸지 않고 한 줄로 두어요. 옆으로 밀면 나머지가 보여요.

SCROLL

<ChipList mode="single" scroll defaultValue={["전체"]}>
  {cats.map((c) => <Chip key={c} value={c}>{c}</Chip>)}
</ChipList>

크기와 상태

STATES

기본

선택됨

꺼짐

작은 크기

이렇게 써요

이렇게칩 글자는 한두 단어로 짧게 써요.

이렇게 말고문장처럼 긴 글은 칩이 아니라 버튼이나 목록에 둬요.

속성

속성	값	기본값	설명
`mode`	"single" \| "multiple"	`single`	ChipList. 하나만 고를지 여러 개 고를지
`value / defaultValue`	string[]	없음	ChipList. 고른 값 목록(제어, 비제어)
`onChange`	(value: string[]) => void	없음	ChipList. 고른 값이 바뀌면 불러요
`scroll`	boolean	`true`	ChipList. 한 줄로 두고 가로로 민다

속성	값	기본값	설명
`value`	string	없음	Chip. ChipList 안에서 이 칩을 구분하는 값
`selected`	boolean	없음	Chip. ChipList 밖에서 직접 켜고 끌 때
`size`	"md" \| "sm"	`md`	높이 36, 28px
`disabled`	boolean	`false`	누를 수 없는 상태