Resources
Intro & Anatomy
Chips are interactive elements that help users categorise, filter, or select content within grouped contexts. Use chips when users need to make selections from predefined options, apply filters, or represent selected items, e.g. tags or categories.
Chips consist of a mandatory label, optional leading icon, and conditional trailing close icon for dismissible variants.
MDX offers both rounded and square chip variants to match different design requirements and use cases.
Options & Styles
Labels & Icons
Label is always required to clearly communicate the chip's purpose.
Icon is optional and should only be used when it helps communicate function.
Close icon is conditional and appears only in multiple select variants where users can dismiss individual chips.
Sizes
MDX chips come in three different sizes: small, medium and large.
Medium is the default size.
Width automatically adjusts to fit the content, hugging the label and any icons.
Variants
MDX offers two chips variants:
rounded
square
States
Chips have multiple interactive states for both unselected & selected:
Default for standard appearance
Hover for interactive feedback
Disabled for unavailable options
Disabled
Disabled chips show that an option exists but isn't currently available, e.g. when certain conditions haven't been met or the option is temporarily unavailable.
The cursor changes to indicate the checkbox is not interactive.
Single-Select vs. Multi-Select
Chips can be used as either single-select or multi-select options.
Single-Select
Single-select chips function like radio buttons, allowing only one selected chip per group.
Multi-Select
Multi-select chips function like checkboxes, allowing multiple selections within a group.
Multi-select chips display a close icon on selected items for individual removal, and can include select/deselect all functionality for the entire group.
Best Practice & Usage
Chips should be used for filtering, categorising, or selecting content where users need quick, visual feedback on their choices and selections.
Make sure all chip options are visible simultaneously and use concise, descriptive labels that clearly communicate each option's purpose.
For simple binary choices or immediate state changes, use toggle switches instead of chips. For form inputs, use checkboxes or radio buttons instead.
Use chips when users can select one or multiple options. Display chips in groups for effective categorisation and filtering.
Avoid using chips when there is only a single option available for selection.
Help users avoid unnecessary clicks by providing a "clear all" button to deselect all selected chips.
Avoid forcing users to manually deselect each chip individually.
When chips need to be disabled, keep the number of disabled chips to a maximum of two.
If there are many disabled chips, opt to hide them instead.
Use descriptive and clear labels and group together related content.
Avoid grouping chips with unrelated content together.
Hug the content of chips to save space and maintain visual efficiency.
Chips are meant to be space-efficient elements. Avoid displaying chips at full width.
Use horizontal scrolling to maintain chip grouping and prevent layout issues on smaller screens.
Avoid wrapping chips to multiple rows as this breaks visual grouping and
Theming
You can customise colours, border width and radius, font styles, spacing, and paddings to match your design requirements.
For chip groups, you can also adjust spacing between individual chip items.
When not using MDX icons, a slot is available to use your own icon library or SVG icons.