Chip

Pick one or multiple values with inline controls

Source

Docs

Package

Usage

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

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

Controlled

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

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

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

Change checked icon

Forbidden

import { Chip } from '@thinker-core/mantine-core';
import { IconX } from '@tabler/icons-react';

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

Icon and section

Chip can have both icon and left/right sections. This is useful when you want to add an icon to the chip and also have a left/right section.

Chip can have left and right sections

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

function Demo() {
  return (
    <Chip
      variant="filled"
      defaultChecked
      leftSection={<IconArrowLeft size={16} />}
      rightSection={<IconArrowRight size={16} />}
    >
      Chip can have left and right sections
    </Chip>
  );
}

States

Chip with tooltip

To use Chip with Tooltip and other similar components, set refProp="rootRef" on the Tooltip component:

Chip with tooltip

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

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

Add props to the root element

All props passed to the component are forwarded to the input element. If you need to add props to the root element, use wrapperProps. In the following example:

data-testid="wrapper" is added to the root element
data-testid="input" is added to the input element

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

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

Chip.Group

Chip.Group component manages state of child Chip components, set multiple prop to allow multiple chips to be selected at a time:

import { Chip, Group } from '@thinker-core/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>
    </>
  );
}

Controlled Chip.Group

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

function Single() {
  // string value when multiple is false (default)
  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() {
  // array of strings value when multiple is 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>
  );
}

Deselect radio chip

First

Second

Third

import { useState } from 'react';
import { Chip, Group } from '@thinker-core/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>
  );
}

Filter

.customChip2 {
  &:not([data-disabled]) {
    border-color: var(--mantine-color-smokey-1);
    background-color: var(--mantine-color-smokey-1);
  }
}

.customChip4 {
  color: var(--mantine-color-ocean-text);
  background-color: var(--mantine-color-ocean-light-active);
}

.customChip5 {
  &:not([data-disabled]) {
    background-color: var(--mantine-color-ocean-1);
    color: var(--mantine-color-ocean-text);
  }
}

Accessibility

Chip and Chip.Group components are accessible by default – they are built with native radio/checkbox inputs, all keyboard events work the same as with native controls.

Checkbox

ColorInput