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>
        <Group position="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 position="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 '@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>
  );
}

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"
Key of theme.radius or any valid CSS value to set border-radius, "xl" by default
size
number | "xs" | "sm" | "md" | "lg" | "xl"
Predefined chip size
type
"checkbox" | "radio"
Chip input type
variant
Variants<"outline" | "light" | "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
children
ReactNode
<Chip /> components
defaultValue
string | string[]
Uncontrolled component initial value
multiple
boolean
Allow multiple values to be selected at a time
onChange
(value: T extends true ? string[] : string) => void
Called when value changes
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