# 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, useSeedClassName } from "@seed-design/lynx-react";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-chip-root`}>
      <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>
    </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

## Examples

### Sizes

#### Small

```tsx
import "./styles";

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

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-chip-root`}>
      <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>
    </view>
  );
}
```

#### Medium

```tsx
import "./styles";

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

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-chip-root`}>
      <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>
    </view>
  );
}
```

#### Large

```tsx
import "./styles";

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

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-chip-root`}>
      <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>
    </view>
  );
}
```

### Variants

#### Solid

```tsx
import "./styles";

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

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-chip-root`}>
      <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>
    </view>
  );
}
```

#### Outline Strong

```tsx
import "./styles";

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

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-chip-root`}>
      <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>
    </view>
  );
}
```

#### Outline Weak

```tsx
import "./styles";

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

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-chip-root`}>
      <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>
    </view>
  );
}
```

### Prefix Icon

```tsx
import "./styles";

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

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

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-chip-root`}>
      <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>
    </view>
  );
}
```

### Suffix Icon

```tsx
import "./styles";

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

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

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-chip-root`}>
      <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>
    </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, useSeedClassName } from "@seed-design/lynx-react";

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [checked, setChecked] = useState(false);

  return (
    <view className={`${seedClassName} docs-lynx-chip-root`}>
      <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>
    </view>
  );
}
```

### Prefix Avatar

Lynx 패키지는 Avatar 컴포넌트를 제공하지 않습니다. `Chip.PrefixAvatar` 안에 앱이 소유한 아바타 컴포넌트나 view를 넣어 사용하세요. 아래 예제의 이니셜 원은 이미지 로딩과 fallback을 포함한 Avatar 구현이 아니라 슬롯 조합 방법만 보여줍니다.

```tsx
import "./styles";

import { Chip, useSeedClassName } 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() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <view className={`${seedClassName} docs-lynx-chip-root`}>
      <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>
    </view>
  );
}
```

### Listening to Value Changes

- `Chip.Toggle`
  - `onCheckedChange`를 사용하여 토글 상태 변경을 감지할 수 있습니다.
- `Chip.RadioRoot` / `Chip.RadioItem`
  - `Chip.RadioRoot`의 `onValueChange`를 사용하여 라디오 버튼의 선택 값 변경을 감지할 수 있습니다.

```tsx
import "./styles";

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

export default function Example() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  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={`${seedClassName} docs-lynx-chip-root`}>
      <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>
    </view>
  );
}
```

## 웹 버전과의 차이

<Callout type="warning">
  Lynx `Chip`은 React `Chip`과 같은 Button, Toggle, Radio 구성과 size/variant 이름을 사용하지만 다음 차이가 있습니다.

  - **렌더링 요소**: HTML `<button>` / `<label>` / `<input>` 대신 네이티브 `<view>` / `<text>`를 렌더링합니다.
  - **이벤트 핸들링**: `onClick` 대신 `bindtap`, `onChange` 대신 `onCheckedChange` 또는 `onValueChange`를 사용합니다.
  - **상태 스타일**: 웹 pseudo selector 대신 touch 상태와 선택 상태를 Lynx recipe의 `pressed`, `selected` variant로 연결합니다.
  - **아이콘 렌더링**: SVG `currentColor` 대신 Lynx monochrome icon과 `<image tint-color>` 기반 Icon wrapper를 사용합니다.
  - **접근성 역할과 상태**: `Chip.Button`, `Chip.Toggle`, `Chip.RadioItem`은 각각 `button`, `toggle`, `radio` 역할을 `accessibility-role-description`으로 전달합니다. Toggle의 checked 상태와 RadioItem의 selected 상태는 `accessibility-value`로 전달하고, disabled 상태는 `accessibility-traits`로 전달합니다. 필요하면 각 속성을 직접 덮어쓸 수 있습니다.
  - **공개 표면**: React의 registry wrapper 역할을 Lynx package API가 직접 제공하므로 별도 snippet을 설치하지 않습니다.
</Callout>

## Lynx 미지원 기능

현재 Lynx 구현과 런타임 모델 차이로 다음 기능은 지원하지 않습니다.

| 기능                                      | 설명                                                          |
| --------------------------------------- | ----------------------------------------------------------- |
| HiddenInput / `inputProps`              | Lynx에 HTML input과 form 제출 모델이 없습니다.                         |
| `name` / `required` / native form value | HTML form 속성을 연결할 대상이 없습니다.                                 |
| raw DOM `onChange`                      | `onCheckedChange` 또는 `onValueChange`로 대체합니다.                |
| 키보드 focus / `focusVisible`              | Lynx에는 웹과 같은 키보드 focus 모델이 없습니다.                            |
| `asChild`                               | Lynx는 웹 Slot 기반 다형 렌더링을 지원하지 않습니다.                          |
| Avatar 패키지                              | `Chip.PrefixAvatar` 슬롯에 앱이 소유한 avatar view나 컴포넌트를 넣어 사용합니다. |