Chip

Pick one or multiple values with inline controls
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

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.

Go back
Checkbox – @mantine/core
Up next
ColorInput – @mantine/core

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
Learn more about Styles API
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter