Chip

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

사용 가능 버전@seed-design/[email protected], @seed-design/[email protected]

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

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 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

`Chip.Toggle`

Prop

Type

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

`Chip.RadioRoot`

Prop

Type

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

`Chip.RadioItem`

Prop

Type

valuestring

Slots

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

Examples

Sizes

Small

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 } 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를 넣으세요.

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

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로 선택 값 변경을 알립니다.

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

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를 넣으세요.

Chip

목차