# Chip
Package: @thinker-core/mantine-core
Import: import { Chip } from '@thinker-core/mantine-core';

## Usage

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

function Demo() {
  return <Chip defaultChecked color="ocean" variant="filled" children="Awesome chip" size="md" radius="full" disabled={false}>{{children}}</Chip>
}
```


## Controlled

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

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

function Demo() {
  return (
    <Chip
      icon={<XIcon size={16} />}
      color="cherry"
      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.

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

```tsx
function Demo() {
  return (
    <>
      <Chip.Group multiple value={['checked', 'checked-disabled']}>
        <Group justify="center">
          <Chip value="default" variant="outline">
            Outline default
          </Chip>
          <Chip value="checked" variant="outline">
            Outline checked
          </Chip>
          <Chip value="checked-disabled" disabled variant="outline">
            Outline checked disabled
          </Chip>
        </Group>
      </Chip.Group>

      <Chip.Group multiple value={['checked', 'checked-disabled']}>
        <Group justify="center" mt="md">
          <Chip value="default" variant="light">
            Light default
          </Chip>
          <Chip value="checked" variant="light">
            Light checked
          </Chip>
          <Chip value="checked-disabled" disabled variant="light">
            Light checked disabled
          </Chip>
        </Group>
      </Chip.Group>

      <Chip.Group multiple value={['checked', 'checked-disabled']}>
        <Group justify="center" mt="md">
          <Chip value="default" variant="filled">
            Filled default
          </Chip>
          <Chip value="checked" variant="filled">
            Filled checked
          </Chip>
          <Chip value="checked-disabled" disabled variant="filled">
            Filled checked disabled
          </Chip>
        </Group>
      </Chip.Group>
    </>
  );
}
```


## Chip with tooltip

To use `Chip` with [Tooltip](https://mantine.dev/llms/core-tooltip.md) and other similar components, set `refProp="rootRef"`
on the [Tooltip](https://mantine.dev/llms/core-tooltip.md) component:

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

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


## Wrapper props

Chip supports additional props that are passed to the wrapper element for more customization options.

## Chip.Group

The `Chip.Group` component manages the state of child Chip components.
Set the `multiple` prop to allow multiple chips to be selected at a time:

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

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

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

```tsx
// Demo.module.css
.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);
  }
}

// Demo.tsx
import { Chip, CloseIcon, Group } from '@thinker-core/mantine-core';
import { HomeOutlinedIcon } from '@thinker-core/mantine-icons';

function Demo() {
  return (
    <>
      <Group justify="center">
        <Chip
          value="1"
          leftSection={<HomeOutlinedIcon width="16px" height="16px" />}
          rightSection={<CloseIcon size="16px" />}
          checked={false}
          variant="outline"
          showCheckIcon={false}
        >
          chip 1
        </Chip>
        <Chip
          value="2"
          leftSection={<HomeOutlinedIcon width="16px" height="16px" />}
          rightSection={<CloseIcon size="16px" />}
          checked={false}
          variant="outline"
          classNames={{
            label: classes.customChip2,
          }}
          showCheckIcon={false}
        >
          chip 2
        </Chip>
        <Chip
          value="3"
          leftSection={<HomeOutlinedIcon width="16px" height="16px" />}
          rightSection={<CloseIcon size="16px" />}
          checked={false}
          variant="outline"
          disabled
          showCheckIcon={false}
        >
          chip 3
        </Chip>
        <Chip
          value="4"
          leftSection={<HomeOutlinedIcon width="16px" height="16px" />}
          rightSection={<CloseIcon size="16px" />}
          checked
          showCheckIcon={false}
          variant="light"
          classNames={{
            label: classes.customChip4,
          }}
        >
          chip 4
        </Chip>
        <Chip
          value="5"
          leftSection={<HomeOutlinedIcon width="16px" height="16px" />}
          rightSection={<CloseIcon size="16px" />}
          checked={false}
          showCheckIcon={false}
          variant="light"
          classNames={{
            label: classes.customChip5,
          }}
        >
          chip 5
        </Chip>
        <Chip
          value="6"
          leftSection={<HomeOutlinedIcon width="16px" height="16px" />}
          rightSection={<CloseIcon size="16px" />}
          checked={false}
          showCheckIcon={false}
          variant="light"
          disabled
        >
          chip 6
        </Chip>
      </Group>
    </>
  );
}
```


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


#### Props

**Chip props**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| autoContrast | boolean | - | If set, adjusts text color based on the chip background color for `filled` variant |
| checked | boolean | - | Controlled checked state |
| children | React.ReactNode | required | `label` element associated with the input |
| color | MantineColor | - | Key of `theme.colors` or any valid CSS color. |
| defaultChecked | boolean | - | Uncontrolled checked state initial value |
| icon | React.ReactNode | - | Any element or component to replace the default icon |
| id | string | - | Unique input id, generated randomly if not provided |
| leftSection | React.ReactNode | - | Content displayed on the left side of the chip children |
| onChange | (checked: boolean) => void | - | Calls when checked state changes |
| radius | MantineRadius \| number | - | Key of `theme.radius` or any valid CSS value to set `border-radius` |
| rightSection | React.ReactNode | - | Content displayed on the right side of the chip children |
| rootRef | Ref<HTMLDivElement> | - | Assigns ref of the root element |
| showCheckIcon | boolean | - | Determines whether check icon should be shown when chip is checked |
| size | MantineSize | - | Controls various properties related to the component size |
| ts | StyleProp<"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "d2" \| "d1" \| "d3" \| "d4" \| "d5" \| "d6" \| "d7" \| "d8" \| "d9" \| "d10" \| "h7" \| "h8" \| "h9" \| "h10" \| "t2" \| "t1" \| "t3" \| "t4" \| "t5" \| "t6" \| ... 63 more ... \| "lu10"> | - | TextStyle, custom text styles that will override fz, lh, fw, td |
| type | "checkbox" \| "radio" | - | Chip input type |
| wrapperProps | React.ComponentProps<"div"> | - | Props passed down to the root element |

**Chip.Group props**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| children | React.ReactNode | - | `Chip` components and any other elements |
| defaultValue | Primitive \| Value[] \| null | - | Uncontrolled component initial value |
| multiple | boolean | - | If set, multiple values can be selected |
| onChange | (value: Multiple extends true ? Value[] : Value) => void | - | Called when value changes. If `multiple` prop is set, called with an array of selected values. If not, called with a string value of selected chip. |
| value | Primitive \| Value[] \| null | - | Controlled component value |

**Chip.GroupContext props**

| Prop | Type | Default | Description |
|------|------|---------|-------------|


#### Styles API

Chip component supports Styles API. With Styles API, you can customize styles of any inner element. Follow the documentation to learn how to use CSS modules, CSS variables and inline styles to get full control over component styles.

**Chip selectors**

| Selector | Static selector | Description |
|----------|----------------|-------------|
| root | .mantine-Chip-root | Root element |
| checkIcon | .mantine-Chip-checkIcon | Check icon, visible when checked prop is true |
| iconWrapper | .mantine-Chip-iconWrapper | Wraps `checkIcon` for alignment |
| input | .mantine-Chip-input | Input element, hidden by default |
| label | .mantine-Chip-label | Input label, used as a chip body |
| section | .mantine-Chip-section | Left and right sections of the chip |

**Chip CSS variables**

| Selector | Variable | Description |
|----------|----------|-------------|
| root | --chip-fz | Controls `font-size` |
| root | --chip-size | Controls `height` |
| root | --chip-icon-size | Controls width and height of the icon |
| root | --chip-padding | Controls horizontal padding when chip is not checked |
| root | --chip-checked-padding | Controls horizontal padding when chip is checked |
| root | --chip-radius | Controls `border-radius` |
| root | --chip-bg | Controls `background-color` when chip is checked |
| root | --chip-hover | Controls `background-color` when chip is checked and hovered |
| root | --chip-color | Controls `color` when chip is checked |
| root | --chip-bd | Controls border when chip is checked |
| root | --chip-spacing | Controls spacing between check icon and label |
| root | --chip-checked-color | Controls `color` when chip is checked |

**Chip data attributes**

| Selector | Attribute | Condition | Value |
|----------|-----------|-----------|-------|
| label | data-checked | Chip is checked | - |
| label | data-disabled | `disabled` prop is set | - |