Chip

Pick one or multiple values with inline controls
Import

Usage

Color
Variant
Size
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl
import { Chip } from '@mantine/core';
function Demo() {
return <Chip defaultChecked>Awesome chip</Chip>
}

Controlled

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

States

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 } from '@mantine/core';
function Demo() {
return (
<>
<Chip.Group position="center">
<Chip value="1">Single chip</Chip>
<Chip value="2">Can be selected</Chip>
<Chip value="3">At a time</Chip>
</Chip.Group>
<Chip.Group position="center" multiple mt={15}>
<Chip value="1">Multiple chips</Chip>
<Chip value="2">Can be selected</Chip>
<Chip value="3">At a time</Chip>
</Chip.Group>
</>
);
}

Controlled Chip.Group

import { useState } from 'react';
import { Chip } from '@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 value={value} onChange={setValue} multiple>
<Chip value="react">React</Chip>
<Chip value="ng">Angular</Chip>
<Chip value="svelte">Svelte</Chip>
<Chip value="vue">Vue</Chip>
</Chip.Group>
);
}

Customize styles

import { createStyles, Chip } from '@mantine/core';
const useStyles = createStyles((theme, _params, getRef) => ({
label: {
'&[data-checked]': {
'&, &:hover': {
backgroundColor: theme.colors.blue[theme.fn.primaryShade()],
color: theme.white,
},
[`& .${getRef('iconWrapper')}`]: {
color: theme.white,
},
},
},
iconWrapper: {
ref: getRef('iconWrapper'),
},
}));
function Demo() {
const { classes } = useStyles();
return (
<Chip.Group position="center" multiple defaultValue={['react']}>
<Chip classNames={classes} value="react">React</Chip>
<Chip classNames={classes} value="ng">Angular</Chip>
<Chip classNames={classes} value="vue">Vue</Chip>
<Chip classNames={classes} value="svelte">Svelte</Chip>
</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.

Download more icon variants from https://tabler-icons.io/i/search

Chip component props

NameTypeDescription
checked
boolean
Checked state for controlled component
children *
ReactNode
Chip label
color
MantineColor
Active color from theme, defaults to theme.primaryColor
defaultChecked
boolean
Default value for uncontrolled component
id
string
Static id to bind input with label
onChange
(checked: boolean) => void
Calls when checked state changes
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Chip radius from theme or number to set value in px
size
"xs" | "sm" | "md" | "lg" | "xl"
Predefined chip size
type
"checkbox" | "radio"
Chip input type
variant
"outline" | "filled"
Controls chip appearance, defaults to filled with dark theme and to outline in light theme
wrapperProps
Record<string, any>
Props spread to wrapper element

Chip.Group component props

NameTypeDescription
align
AlignItems
Defines align-items css property
children
ReactNode
<Chip /> components
defaultValue
string | string[]
Uncontrolled component initial value
grow
boolean
Defines flex-grow property for each element, true -> 1, false -> 0
multiple
boolean
Allow multiple values to be selected at a time
noWrap
boolean
Defined flex-wrap property
onChange
(value: T extends true ? string[] : string) => void
Called when value changes
position
"left" | "right" | "center" | "apart"
Defines justify-content property
spacing
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.spacing or number to set gap in px
value
string | string[]
Controlled component value

Chip component Styles API

NameStatic selectorDescription
root.mantine-Chip-rootRoot element
label.mantine-Chip-labelChip label, includes all other elements except input
input.mantine-Chip-inputChip input, hidden by default
iconWrapper.mantine-Chip-iconWrapperCheck icon wrapper
checkIcon.mantine-Chip-checkIconCheck icon, displayed when checkbox or radio is checked