v6.0.35

Chip

Pick one or multiple values with inline controls
Import

Usage

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

Controlled

import { useState } from 'react';
import { Chip } from '@asuikit/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 '@asuikit/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 '@asuikit/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.

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.asuikit-Chip-rootRoot element
label.asuikit-Chip-labelChip label, includes all other elements except input
input.asuikit-Chip-inputChip input, hidden by default
iconWrapper.asuikit-Chip-iconWrapperCheck icon wrapper
checkIcon.asuikit-Chip-checkIconCheck icon, displayed when checkbox or radio is checked