Chip

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

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

Lynx 예제를 불러오는 중입니다.

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 install @seed-design/lynx-react @seed-design/lynx-css

pnpm add @seed-design/lynx-react @seed-design/lynx-css

yarn add @seed-design/lynx-react @seed-design/lynx-css

bun add @seed-design/lynx-react @seed-design/lynx-css

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

Props

`Chip.Button`

Prop

Type

style?CSSProperties | undefined

children?React.ReactNode

className?string | undefined

bindtap?EventHandler<BaseTouchEvent<Target>> | undefined

main-thread:bindtap?EventHandler<BaseTouchEvent<Element>> | undefined

`Chip.Toggle`

Prop

Type

checked?boolean | undefined

defaultChecked?boolean | undefined

onCheckedChange?((checked: boolean) => void) | undefined

style?CSSProperties | undefined

children?React.ReactNode

className?string | undefined

bindtap?EventHandler<BaseTouchEvent<Target>> | undefined

main-thread:bindtap?EventHandler<BaseTouchEvent<Element>> | undefined

`Chip.RadioRoot`

Prop

Type

value?string | undefined

defaultValue?string | undefined

disabled?boolean | undefined

onValueChange?((value: string) => void) | undefined

style?CSSProperties | undefined

children?React.ReactNode

className?string | undefined

`Chip.RadioItem`

Prop

Type

valuestring

style?CSSProperties | undefined

children?React.ReactNode

className?string | undefined

bindtap?EventHandler<BaseTouchEvent<Target>> | undefined

main-thread:bindtap?EventHandler<BaseTouchEvent<Element>> | undefined

Slots

Prop

Type

style?CSSProperties | undefined

children?React.ReactNode

className?string | undefined

Examples

Sizes

Small

Lynx 예제를 불러오는 중입니다.

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

Lynx 예제를 불러오는 중입니다.

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

Lynx 예제를 불러오는 중입니다.

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

Lynx 예제를 불러오는 중입니다.

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

Lynx 예제를 불러오는 중입니다.

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

Lynx 예제를 불러오는 중입니다.

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

Lynx 예제를 불러오는 중입니다.

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

Lynx 예제를 불러오는 중입니다.

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을 함께 전달합니다.

Lynx 예제를 불러오는 중입니다.

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 구현이 아니라 슬롯 조합 방법만 보여줍니다.

Lynx 예제를 불러오는 중입니다.

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를 사용하여 라디오 버튼의 선택 값 변경을 감지할 수 있습니다.

Lynx 예제를 불러오는 중입니다.

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>
  );
}

웹 버전과의 차이

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을 설치하지 않습니다.

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나 컴포넌트를 넣어 사용합니다.

Chip

목차