Chip
Pick one or multiple values with inline controls
Import
Source
Docs
Package
Usage
Color
Shades
Variant
Size
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl
Controlled
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:
Controlled 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
Name | Type | Description |
---|---|---|
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
Name | Type | Description |
---|---|---|
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
Name | Static selector | Description |
---|---|---|
root | .asuikit-Chip-root | Root element |
label | .asuikit-Chip-label | Chip label, includes all other elements except input |
input | .asuikit-Chip-input | Chip input, hidden by default |
iconWrapper | .asuikit-Chip-iconWrapper | Check icon wrapper |
checkIcon | .asuikit-Chip-checkIcon | Check icon, displayed when checkbox or radio is checked |