Chip

Chip (칩)

Chip 컴포넌트는 하나 또는 여러 값을 인라인 컨트롤로 선택할 수 있게 해 주는 컴포넌트예요. 체크 가능한 태그처럼 동작해요.

출처: 문서

본문

Chip 컴포넌트를 사용하면 값을 선택하거나 해제할 수 있는 태그를 만들 수 있어요.

import { Chip } from '@mantine/core';

function Demo() {
  return <Chip defaultChecked>Awesome chip</Chip>
}

제어(Controlled) 사용

checked와 onChange prop을 활용해 상태를 제어할 수 있어요.

import { useState } from 'react';
import { Chip } from '@mantine/core';

function Demo() {
  const [checked, setChecked] = useState(false);

  return (
    <Chip checked={checked} onChange={() => setChecked((v) => !v)}>
      My chip
    </Chip>
  );
}

체크 아이콘 바꾸기

icon prop으로 선택되었을 때 표시될 아이콘을 바꿀 수 있어요.

import { Chip } from '@mantine/core';
import { XIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <Chip
      icon={<XIcon size={16} />}
      color="red"
      variant="filled"
      defaultChecked
    >
      Forbidden
    </Chip>
  );
}

상태 (States)

Chip은 variant(outline/light/filled)와 선택 여부, 비활성 여부에 따라 다양한 상태를 가져요.

Chip과 툴팁 함께 쓰기

Chip을 Tooltip 등과 함께 쓸 때는 Tooltip 컴포넌트에 refProp="rootRef"를 설정해요.

import { Tooltip, Chip } from '@mantine/core';

function Demo() {
  return (
    <Tooltip label="Chip tooltip" refProp="rootRef">
      <Chip defaultChecked>Chip with tooltip</Chip>
    </Tooltip>
  );
}

루트 요소에 prop 추가하기

컴포넌트에 전달된 모든 prop은 input 요소로 전달돼요. 루트 요소에 prop을 추가하려면 wrapperProps를 사용해요. 아래 예시에서:

  • data-testid="wrapper"는 루트 요소에 추가돼요
  • data-testid="input"은 input 요소에 추가돼요
import { Chip } from '@mantine/core';

function Demo() {
  return <Chip wrapperProps={{ 'data-testid': 'wrapper' }} data-testid="input" />;
}

Chip.Group

Chip.Group 컴포넌트는 하위 Chip 컴포넌트들의 상태를 관리해요. multiple prop을 설정하면 한 번에 여러 칩을 선택할 수 있어요.

import { Chip, Group } from '@mantine/core';

function Demo() {
  return (
    <>
      <Chip.Group>
        <Group justify="center">
          <Chip value="1">Single chip</Chip>
          <Chip value="2">Can be selected</Chip>
          <Chip value="3">At a time</Chip>
        </Group>
      </Chip.Group>

      <Chip.Group multiple>
        <Group justify="center" mt="md">
          <Chip value="1">Multiple chips</Chip>
          <Chip value="2">Can be selected</Chip>
          <Chip value="3">At a time</Chip>
        </Group>
      </Chip.Group>
    </>
  );
}

제어되는 Chip.Group

import { useState } from 'react';
import { Chip } from '@mantine/core';

function Single() {
  // multiple이 false(기본값)일 때는 문자열 값
  const [value, setValue] = useState('react');

  return (
    <Chip.Group multiple={false} value={value} onChange={setValue}>
      <Chip value="react">React</Chip>
      <Chip value="ng">Angular</Chip>
      <Chip value="svelte">Svelte</Chip>
      <Chip value="vue">Vue</Chip>
    </Chip.Group>
  );
}

function Multiple() {
  // multiple이 true일 때는 문자열 배열 값
  const [value, setValue] = useState(['react']);

  return (
    <Chip.Group multiple value={value} onChange={setValue}>
      <Chip value="react">React</Chip>
      <Chip value="ng">Angular</Chip>
      <Chip value="svelte">Svelte</Chip>
      <Chip value="vue">Vue</Chip>
    </Chip.Group>
  );
}

라디오 칩 선택 해제하기

같은 값을 다시 클릭했을 때 선택을 해제하고 싶다면 onClick에서 현재 값을 확인해 null로 설정하면 돼요.

import { useState } from 'react';
import { Chip, Group } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState<string | null>('first');
  const handleChipClick = (event: React.MouseEvent<HTMLInputElement>) => {
    if (event.currentTarget.value === value) {
      setValue(null);
    }
  };

  return (
    <Chip.Group multiple={false} value={value} onChange={setValue}>
      <Group>
        <Chip value="first" onClick={handleChipClick}>
          First
        </Chip>
        <Chip value="second" onClick={handleChipClick}>
          Second
        </Chip>
        <Chip value="third" onClick={handleChipClick}>
          Third
        </Chip>
      </Group>
    </Chip.Group>
  );
}

접근성 (Accessibility)

Chip과 Chip.Group 컴포넌트는 기본적으로 접근 가능해요. 네이티브 radio/checkbox input으로 만들어져 있어서 모든 키보드 이벤트가 네이티브 컨트롤과 동일하게 동작해요.

더 알아보기 (Learn more)