Chips
Alternative to Select and RadioGroup
Import
Source
Docs
Package
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 trueconst [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>);}
Server side rendering
Both Chip and Chips component use use-id hook to generate unique ids to connect inputs with labels,
provide static id prop to prevent props mismatch:
<Chips /> // random id generated both on client and server, props mismatch warning<Chip /> // random id generated both on client and server, props mismatch warning// -> id is static, no mismatches<Chip id="my-chip" />// -> id is static, no mismatches<Chips id="my-chips-picker">{/* It's not required to set id on Chip component when it is used inside Chips */}<Chip value="react">React</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.