Chip

MenuChip

This component is supposed to be used as a trigger for opening menus. It's meant to replace all usage of ActionButton and custom implementations as triggers.

Basic usage

The usage below is showed in isolation for demo purposes.

variant

This component comes with two variants: filled and outline.

The default value is filled.

label

The label of the menu.

size

This component comes in two sizes: small and medium.

The default value is medium.

aria-expanded

The open/closed state of the menu.

Because this component is meant to be composed with a menu, we need to use aria attributes to control various states instead of a conventional boolean like isOpen.

hasValue

Tells the component if the menu has a value selected.

disabled

Makes the tirggered disabled so that the user is unable to access the menu.

iconBefore

Renders an icon before the label. When the hasValue prop is true, this icon gets replaced by a tick icon to show that the menu has a selection.

selectionCount

Show the number of selections when a multi select menu has a large number of selections.

onClick

This component is rendered as a button so the onClick handler is required.

onClear (optional)

Optionally provide a function to clear the select directly from the trigger. This renders a delete button inside the trigger.

hasChevron (optional)

Optionally render a chevron icon that tracks the open/closed state of the menu. This should only be used in rare cases to support some legacy UIs.

MenuChip recipes

Single select menu

Multi select menu

FilterChipRadioGroup

This component helps the user make a single selection from a small list of items, it is implemented as a radio group under the hood.

This component has the same variant and size props from above.

Basic usage

legend

Since this component is implemented as a radio group, we need a label for the underlying fieldset. This label will not be shown to the user, it's only there for accessibility purpose.

options

List of options that are presented to the user in the following shape:

type Options = Array<{ label: string; value: Value; disabled?: boolean }>;

value

The current value of the radio group.

onChange

Event handler for when user makes a selection.

FilterChipRadio is the individual chip FilterChipRadioGroup renders per option — exported directly for the rare case you need to lay out the items yourself rather than the group's default flow layout.

FilterChipCheckboxGroup

This component helps the user make multiple selections from a small list of items, it is implemented as a checkbox group under the hood.

This component has the same variant and size props from above.

Basic usage

legend

Since this component is implemented as a checkbox group, we need a label for the underlying fieldset. This label will not be shown to the user, it's only there for accessibility purpose.

options

List of options that are presented to the user in the following shape:

type Options = Array<{ label: string; value: Value; disabled?: boolean }>;

value

The current value of the checkbox group.

onChange

Event handler for when user makes a selection.

FilterChipCheckbox is the individual chip FilterChipCheckboxGroup renders per option — exported directly for the rare case you need to lay out the items yourself rather than the group's default flow layout.