ChipGroup
Use the ChipGroup component to group multiple Chips in an expandable
container.
Import
import { ChipGroup } from '@dynatrace/strato-components-preview/content';
Use cases
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.
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.
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.
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.
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.
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.
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.