# Chip
URL: /lynx/components/chip
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/lynx/components/chip.mdx

사용자가 선택하거나 실행할 수 있는 짧은 값을 표시하는 컴포넌트입니다.

Lynx Engine 최소 버전: 3.6

사용 가능 버전: @seed-design/lynx-react@0.5.0, @seed-design/lynx-css@0.9.0

## Preview

```tsx
import "./styles";

import { Chip } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <view className="chip-preview">
      <view className="chip-preview__row">
        <Chip.Button>
          <Chip.Label>Button Chip</Chip.Label>
        </Chip.Button>
        <Chip.Toggle>
          <Chip.Label>Toggle Chip</Chip.Label>
        </Chip.Toggle>
      </view>
      <Chip.RadioRoot defaultValue="option1">
        <view className="chip-preview__row">
          <Chip.RadioItem value="option1">
            <Chip.Label>Radio Chip 1</Chip.Label>
          </Chip.RadioItem>
          <Chip.RadioItem value="option2">
            <Chip.Label>Radio Chip 2</Chip.Label>
          </Chip.RadioItem>
        </view>
      </Chip.RadioRoot>
    </view>
  );
}
```

## Installation

- npm: npm install @seed-design/lynx-react @seed-design/lynx-css
- pnpm: pnpm add @seed-design/lynx-react @seed-design/lynx-css
- yarn: yarn add @seed-design/lynx-react @seed-design/lynx-css
- bun: bun add @seed-design/lynx-react @seed-design/lynx-css

<Callout>
  Lynx `Chip`은 별도 `ui:chip` snippet 없이 `@seed-design/lynx-react` 패키지에서 직접 제공합니다.
</Callout>

## Props

### `Chip.Button`

### `Chip.Toggle`

### `Chip.RadioRoot`

### `Chip.RadioItem`

### Slots

슬롯은 고유 prop이 없습니다. `className`, `style`, `children`을 받습니다.

## Examples

### Sizes

#### Small

```tsx
import "./styles";

import { Chip } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <view className="chip-preview">
      <view className="chip-preview__row">
        <Chip.Button size="small">
          <Chip.Label>Small Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle size="small">
          <Chip.Label>Small Toggle</Chip.Label>
        </Chip.Toggle>
      </view>
      <Chip.RadioRoot defaultValue="option1">
        <view className="chip-preview__row">
          <Chip.RadioItem value="option1" size="small">
            <Chip.Label>Small Radio 1</Chip.Label>
          </Chip.RadioItem>
          <Chip.RadioItem value="option2" size="small">
            <Chip.Label>Small Radio 2</Chip.Label>
          </Chip.RadioItem>
        </view>
      </Chip.RadioRoot>
    </view>
  );
}
```

#### Medium

```tsx
import "./styles";

import { Chip } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <view className="chip-preview">
      <view className="chip-preview__row">
        <Chip.Button size="medium">
          <Chip.Label>Medium Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle size="medium">
          <Chip.Label>Medium Toggle</Chip.Label>
        </Chip.Toggle>
      </view>
      <Chip.RadioRoot defaultValue="option1">
        <view className="chip-preview__row">
          <Chip.RadioItem value="option1" size="medium">
            <Chip.Label>Medium Radio 1</Chip.Label>
          </Chip.RadioItem>
          <Chip.RadioItem value="option2" size="medium">
            <Chip.Label>Medium Radio 2</Chip.Label>
          </Chip.RadioItem>
        </view>
      </Chip.RadioRoot>
    </view>
  );
}
```

#### Large

```tsx
import "./styles";

import { Chip } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <view className="chip-preview">
      <view className="chip-preview__row">
        <Chip.Button size="large">
          <Chip.Label>Large Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle size="large">
          <Chip.Label>Large Toggle</Chip.Label>
        </Chip.Toggle>
      </view>
      <Chip.RadioRoot defaultValue="option1">
        <view className="chip-preview__row">
          <Chip.RadioItem value="option1" size="large">
            <Chip.Label>Large Radio 1</Chip.Label>
          </Chip.RadioItem>
          <Chip.RadioItem value="option2" size="large">
            <Chip.Label>Large Radio 2</Chip.Label>
          </Chip.RadioItem>
        </view>
      </Chip.RadioRoot>
    </view>
  );
}
```

### Variants

#### Solid

```tsx
import "./styles";

import { Chip } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <view className="chip-preview">
      <view className="chip-preview__row">
        <Chip.Button variant="solid">
          <Chip.Label>Solid Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle variant="solid">
          <Chip.Label>Solid Toggle</Chip.Label>
        </Chip.Toggle>
      </view>
      <Chip.RadioRoot defaultValue="option1">
        <view className="chip-preview__row">
          <Chip.RadioItem value="option1" variant="solid">
            <Chip.Label>Solid Radio 1</Chip.Label>
          </Chip.RadioItem>
          <Chip.RadioItem value="option2" variant="solid">
            <Chip.Label>Solid Radio 2</Chip.Label>
          </Chip.RadioItem>
        </view>
      </Chip.RadioRoot>
    </view>
  );
}
```

#### Outline Strong

```tsx
import "./styles";

import { Chip } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <view className="chip-preview">
      <view className="chip-preview__row">
        <Chip.Button variant="outlineStrong">
          <Chip.Label>Outline Strong Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle variant="outlineStrong">
          <Chip.Label>Outline Strong Toggle</Chip.Label>
        </Chip.Toggle>
      </view>
      <Chip.RadioRoot defaultValue="option1">
        <view className="chip-preview__row">
          <Chip.RadioItem value="option1" variant="outlineStrong">
            <Chip.Label>Outline Strong Radio 1</Chip.Label>
          </Chip.RadioItem>
          <Chip.RadioItem value="option2" variant="outlineStrong">
            <Chip.Label>Outline Strong Radio 2</Chip.Label>
          </Chip.RadioItem>
        </view>
      </Chip.RadioRoot>
    </view>
  );
}
```

#### Outline Weak

```tsx
import "./styles";

import { Chip } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <view className="chip-preview">
      <view className="chip-preview__row">
        <Chip.Button variant="outlineWeak">
          <Chip.Label>Outline Weak Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle variant="outlineWeak">
          <Chip.Label>Outline Weak Toggle</Chip.Label>
        </Chip.Toggle>
      </view>
      <Chip.RadioRoot defaultValue="option1">
        <view className="chip-preview__row">
          <Chip.RadioItem value="option1" variant="outlineWeak">
            <Chip.Label>Outline Weak Radio 1</Chip.Label>
          </Chip.RadioItem>
          <Chip.RadioItem value="option2" variant="outlineWeak">
            <Chip.Label>Outline Weak Radio 2</Chip.Label>
          </Chip.RadioItem>
        </view>
      </Chip.RadioRoot>
    </view>
  );
}
```

### Prefix Icon

```tsx
import "./styles";

import IconHeartFill from "@karrotmarket/lynx-monochrome-icon/IconHeartFill";

import { Chip } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <view className="chip-preview">
      <view className="chip-preview__row">
        <Chip.Button>
          <Chip.PrefixIcon icon={<IconHeartFill />} />
          <Chip.Label>With Icon Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle>
          <Chip.PrefixIcon icon={<IconHeartFill />} />
          <Chip.Label>With Icon Toggle</Chip.Label>
        </Chip.Toggle>
      </view>
      <Chip.RadioRoot defaultValue="option1">
        <view className="chip-preview__row">
          <Chip.RadioItem value="option1">
            <Chip.PrefixIcon icon={<IconHeartFill />} />
            <Chip.Label>With Icon Radio 1</Chip.Label>
          </Chip.RadioItem>
          <Chip.RadioItem value="option2">
            <Chip.PrefixIcon icon={<IconHeartFill />} />
            <Chip.Label>With Icon Radio 2</Chip.Label>
          </Chip.RadioItem>
        </view>
      </Chip.RadioRoot>
    </view>
  );
}
```

### Suffix Icon

```tsx
import "./styles";

import IconChevronDownLine from "@karrotmarket/lynx-monochrome-icon/IconChevronDownLine";

import { Chip } from "@seed-design/lynx-react";

export default function Example() {
  return (
    <view className="chip-preview">
      <view className="chip-preview__row">
        <Chip.Button>
          <Chip.Label>Button with Suffix</Chip.Label>
          <Chip.SuffixIcon icon={<IconChevronDownLine />} />
        </Chip.Button>
        <Chip.Toggle>
          <Chip.Label>Toggle with Suffix</Chip.Label>
          <Chip.SuffixIcon icon={<IconChevronDownLine />} />
        </Chip.Toggle>
      </view>
      <Chip.RadioRoot defaultValue="option1">
        <view className="chip-preview__row">
          <Chip.RadioItem value="option1">
            <Chip.Label>Radio with Suffix 1</Chip.Label>
            <Chip.SuffixIcon icon={<IconChevronDownLine />} />
          </Chip.RadioItem>
          <Chip.RadioItem value="option2">
            <Chip.Label>Radio with Suffix 2</Chip.Label>
            <Chip.SuffixIcon icon={<IconChevronDownLine />} />
          </Chip.RadioItem>
        </view>
      </Chip.RadioRoot>
    </view>
  );
}
```

### Icon Only

`layout="iconOnly"`에서는 `Icon` 자식과 `accessibility-label`을 함께 전달합니다.

```tsx
import "./styles";

import IconArrowClockwiseCircularLine from "@karrotmarket/lynx-monochrome-icon/IconArrowClockwiseCircularLine";
import IconBellLine from "@karrotmarket/lynx-monochrome-icon/IconBellLine";
import IconBellSlashLine from "@karrotmarket/lynx-monochrome-icon/IconBellSlashLine";
import IconTimer_10Line from "@karrotmarket/lynx-monochrome-icon/IconTimer_10Line";
import IconTimer_3Line from "@karrotmarket/lynx-monochrome-icon/IconTimer_3Line";
import { useState } from "@lynx-js/react";
import { Chip, Icon } from "@seed-design/lynx-react";

export default function Example() {
  const [checked, setChecked] = useState(false);

  return (
    <view className="chip-preview">
      <view className="chip-preview__row">
        <Chip.Button layout="iconOnly" accessibility-label="Refresh">
          <Icon icon={<IconArrowClockwiseCircularLine />} />
        </Chip.Button>
        <Chip.Toggle
          layout="iconOnly"
          checked={checked}
          onCheckedChange={setChecked}
          accessibility-label="Receive notifications"
        >
          <Icon icon={checked ? <IconBellLine /> : <IconBellSlashLine />} />
        </Chip.Toggle>
      </view>
      <Chip.RadioRoot defaultValue="3">
        <view className="chip-preview__row">
          <Chip.RadioItem value="3" layout="iconOnly" accessibility-label="3 seconds">
            <Icon icon={<IconTimer_3Line />} />
          </Chip.RadioItem>
          <Chip.RadioItem value="10" layout="iconOnly" accessibility-label="10 seconds">
            <Icon icon={<IconTimer_10Line />} />
          </Chip.RadioItem>
        </view>
      </Chip.RadioRoot>
    </view>
  );
}
```

### Prefix Avatar

Lynx 패키지는 Avatar 컴포넌트를 제공하지 않습니다. `Chip.PrefixAvatar` 안에 앱이 소유한 아바타 컴포넌트나 view를 넣으세요.

```tsx
import "./styles";

import { Chip } from "@seed-design/lynx-react";

function AppAvatar() {
  return (
    <view className="chip-preview__avatar">
      <text className="chip-preview__avatar-label">A</text>
    </view>
  );
}

export default function Example() {
  return (
    <view className="chip-preview">
      <view className="chip-preview__row">
        <Chip.Button>
          <Chip.PrefixAvatar>
            <AppAvatar />
          </Chip.PrefixAvatar>
          <Chip.Label>With Avatar Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle>
          <Chip.PrefixAvatar>
            <AppAvatar />
          </Chip.PrefixAvatar>
          <Chip.Label>With Avatar Toggle</Chip.Label>
        </Chip.Toggle>
      </view>
      <Chip.RadioRoot defaultValue="option1">
        <view className="chip-preview__row">
          <Chip.RadioItem value="option1">
            <Chip.PrefixAvatar>
              <AppAvatar />
            </Chip.PrefixAvatar>
            <Chip.Label>With Avatar Radio 1</Chip.Label>
          </Chip.RadioItem>
          <Chip.RadioItem value="option2">
            <Chip.PrefixAvatar>
              <AppAvatar />
            </Chip.PrefixAvatar>
            <Chip.Label>With Avatar Radio 2</Chip.Label>
          </Chip.RadioItem>
        </view>
      </Chip.RadioRoot>
    </view>
  );
}
```

### Listening to Value Changes

`Chip.Toggle`은 `onCheckedChange`, `Chip.RadioRoot`는 `onValueChange`로 선택 값 변경을 알립니다.

```tsx
import "./styles";

import { useState } from "@lynx-js/react";
import { Chip } from "@seed-design/lynx-react";

export default function Example() {
  const [toggleCount, setToggleCount] = useState(0);
  const [toggleLastValue, setToggleLastValue] = useState<boolean | null>(null);
  const [radioCount, setRadioCount] = useState(0);
  const [radioLastValue, setRadioLastValue] = useState<string | null>(null);

  return (
    <view className="chip-preview">
      <view className="chip-preview__group">
        <Chip.Toggle
          onCheckedChange={(checked) => {
            setToggleCount((previous) => previous + 1);
            setToggleLastValue(checked);
          }}
        >
          <Chip.Label>Toggle Chip</Chip.Label>
        </Chip.Toggle>
        <text className="chip-preview__status">
          onCheckedChange called: {toggleCount} times, last value:{" "}
          {toggleLastValue === null ? "-" : JSON.stringify(toggleLastValue)}
        </text>
      </view>
      <view className="chip-preview__group">
        <Chip.RadioRoot
          defaultValue="option1"
          onValueChange={(value) => {
            setRadioCount((previous) => previous + 1);
            setRadioLastValue(value);
          }}
        >
          <view className="chip-preview__row">
            <Chip.RadioItem value="option1">
              <Chip.Label>Radio 1</Chip.Label>
            </Chip.RadioItem>
            <Chip.RadioItem value="option2">
              <Chip.Label>Radio 2</Chip.Label>
            </Chip.RadioItem>
          </view>
        </Chip.RadioRoot>
        <text className="chip-preview__status">
          onValueChange called: {radioCount} times, last value: {radioLastValue ?? "-"}
        </text>
      </view>
    </view>
  );
}
```

## 이전 버전에서 옮기기

- `Chip.Root`·`ChipRoot`(Props 타입 포함)를 제거했습니다. React와 같이 `Chip.Button`·`ChipButton`을 사용하세요. 동작과 스타일은 같습니다.
- `Chip.Toggle`의 기본 `accessibility-role-description`이 `"toggle"`에서 `"checkbox"`로 바뀌었습니다. 이전 값이 필요하면 `accessibility-role-description`을 직접 전달하세요.
- `Chip.RadioRoot`는 `radiogroup` 역할을 전달하지만 기본적으로 접근성 요소가 아닌 컨테이너입니다. 각 `Chip.RadioItem`이 독립된 접근성 요소로 노출됩니다. `disabled`이면 `accessibility-traits` 기본값은 `"disabled"`입니다.
- `Chip.Toggle`과 `Chip.RadioItem`의 `bindtap`이 선택 상태를 바꾸기 전에 호출됩니다. tap handler에서 바뀐 선택 값을 읽던 코드는 `onCheckedChange`나 `Chip.RadioRoot`의 `onValueChange`로 옮기세요.

## 웹 버전과의 차이

- 탭 이벤트는 `onClick` 대신 `bindtap`으로 받습니다. 선택 변경은 `onCheckedChange` 또는 `onValueChange`로 확인합니다.
- 접근성 역할과 상태는 Lynx의 `accessibility-role-description`, `accessibility-value`, `accessibility-traits`로 전달합니다.
- 문자열 label을 파악할 수 없는 구성에는 `accessibility-label`을 지정하세요.
- Lynx `Chip`은 별도 Registry snippet 없이 `@seed-design/lynx-react`에서 제공합니다.

## Lynx 미지원 기능

- HiddenInput과 HTML form 속성
- `Chip.Toggle`의 `indeterminate`
- `Chip.RadioRoot`의 `invalid`
- 키보드 focus와 `focusVisible`
- `asChild`
- Avatar 패키지. `Chip.PrefixAvatar`에는 앱이 소유한 avatar를 넣으세요.