Chips

Alternative to Select and RadioGroup
Import

Usage

Use Chips as an inline alternative to RadioGroup and MultiSelect components:

Color
Variant
Spacing
Size
Radius
<Chips>
<Chip value="react">React</Chip>
<Chip value="ng">Angular</Chip>
<Chip value="svelte">Svelte</Chip>
<Chip value="vue">Vue</Chip>
</Chips>

States

<Chips multiple value={['checked', 'checked-disabled']}>
<Chip value="default">Default</Chip>
<Chip value="checked">Checked</Chip>
<Chip value="checked-disabled" disabled>
Checked disabled
</Chip>
</Chips>

Multiple

Set multiple prop to enable multiple chips selection:

// Single chip can be selected at a time (radio input)
<Chips>{/* <Chip /> components */}</Chips>
// Multiple chips can be selected at a time (checkbox input)
<Chips multiple>{/* <Chip /> components */}</Chips>

Controlled

Since Chips component supports both single and multiple state you will need to adjust your state to match multiple prop:

import { useState } from 'react';
import { Chips } from '@mantine/core';
function Demo() {
// string value when multiple is false (default)
const [value, setValue] = useState('react');
return (
<Chips value={value} onChange={setValue}>
<Chip value="react">React</Chip>
<Chip value="ng">Angular</Chip>
<Chip value="svelte">Svelte</Chip>
<Chip value="vue">Vue</Chip>
</Chips>
);
}
function Demo() {
// array of strings value when multiple is true
const [value, setValue] = useState(['react']);
return (
<Chips 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>
</Chips>
);
}

Chip component

You can use Chip component outside of Chips:

import { useState } from 'react';
import { Chip } from '@mantine/core';
function Demo() {
const [checked, setChecked] = useState(false);
return (
<Chip value="chip" checked={checked} onChange={setChecked}>
Just a chip
</Chip>
);
}

Change styles with Styles API

Chip and Chips components use the same Styles API schema, you can use classNames and styles listed under Styles API tab in both components:

import { createStyles, Chip, Chips } from '@mantine/core';
const useStyles = createStyles((theme, _params, getRef) => {
const iconWrapper = getRef('iconWrapper');
return {
iconWrapper: {
ref: iconWrapper,
},
checked: {
backgroundColor: `${theme.colors.blue[6]} !important`,
color: theme.white,
[`& .${iconWrapper}`]: {
color: theme.white,
},
},
};
});
function Demo() {
const { classes } = useStyles();
return (
<Chips position="center" multiple classNames={classes} defaultValue={['react']}>
<Chip value="react">React</Chip>
<Chip value="ng">Angular</Chip>
<Chip value="vue">Vue</Chip>
<Chip value="svelte">Svelte</Chip>
</Chips>
);
}

Accessibility

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

TypeScript

Component props type

Import component props type:

import type { ChipsProps, ChipsProps } from '@mantine/core';

ChipsProps is a generic type that accepts a boolean type as an argument (single or multiple):

type MySingleChipsProps = ChipsProps<false>;
type MyMultipleChipsProps = ChipsProps<false>;
  • ChipsProps extends React.ComponentPropsWithoutRef<'div'>
  • ChipProps extends React.ComponentPropsWithoutRef<'input'>

All other props are available under Component props tab.

ChipStylesNames type

ChipStylesNames type is a union with Chip Styles API names:

import type { ChipStylesNames } from '@mantine/core';
const chipClasses: Partial<Record<ChipStylesNames, 'string'>> = {
icon: 'chip-icon',
input: 'chip-input',
};
// classNames and styles are usable with both Chip and Chips components
<Chip classNames={chipClasses} />;
<Chips classNames={chipClasses} />;

See full styles descriptions list under Styles API tab.

Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback