ChipGroup

Use the ChipGroup component to group multiple Chips in an expandable container.

Import

import { ChipGroup } from '@dynatrace/strato-components-preview/content';

Use cases

CodeSandbox

Show ChipGroup control

You can display a control label at the end of the ChipGroup. This label can be used to expand or collapse the group as needed. To achieve this, add a ChipGroup.Control subcomponent. If the count property is set to true, the label displays the number of hidden chips.

CodeSandbox

Show custom Chip counter

You can customize the counter within the control label by passing a number to the ChipGroup.Control count property. This is useful when the remaining chips are loaded asynchronously, and the total number of chips is already known. For more advanced use-cases, the useChipGroupContext hook provides you with the amount of Chips currently displayed or hidden.

CodeSandbox

Custom control label

Configure the content of the control label by passing a child component to the ChipGroup.Control. Additionally, ChipGroup.HiddenCount provides the number of Chips not currently visible.

CodeSandbox

Remove Chips in ChipGroup

Combine the Chip.DeleteButton subcomponent to remove specific Chips by clicking on the delete button. Provide an onClick handler to remove the selected chip from the rendered collection.

CodeSandbox

Control the ChipGroup

You can use the expanded state of the ChipGroup component in a controlled manner. Set the expanded prop to the state value and the onExpandedChange prop to the state update callback.

CodeSandbox

Disable the ChipGroup

Disable the entire ChipGroup by setting the disabled property to true. This prevents interactions with the Chips while still allowing the group to be expanded or collapsed.

CodeSandbox

Async loading Chips into the ChipGroup

Implement advanced use cases like asynchronous loading of chips on expand by providing an onClick callback to the ChipGroup.Control. Set the loading property of ChipGroup.Control to true to show a visual loading indicator while data is being fetched.

CodeSandbox

Props

ChipGroupProps

Signature:

export declare type ChipGroupProps = & ( | ) & ;

ChipGroupBaseProps

extends,

Name	Type	Default	Description
disabled?		false	Whether the chip group is disabled. If set to true, all the chips inside the group are disabled, unless explicitly overridden.
size?		default	The size of the spacing and chips in the group. All the chips match the size of the group, but can be overridden individually.
onExpandedChange?	(state: ) =>	-	Callback triggered when the expanded state changes.

ChipGroupControlledProps

Name	Type	Default	Description
expanded?		-	Whether the chip group is expanded.

ChipGroupUncontrolledProps

Name	Type	Default	Description
defaultExpanded?		-	Whether the chip group is expanded by default.

ChipGroup.Control

ChipGroupControlProps

extends, ,

Name	Type	Default	Description
display?	|	inferred from the`expanded`/`defaultExpanded`prop of the`ChipGroup`	Whether to show more chips or collapse chips. If undefined, the action is inferred. If no more items are available and all items fit in one line, the control is automatically hidden unless display is set.
count?	|	undefined	Whether to render `Show more` or `Show x more` by default. If true, the count is calculated automatically. The count can be overridden by passing a number.
loading?		false	Whether the control should show the loading indicator.
onClick?	.<>	-	Callback triggered when the control is interacted with.