Skip to main content

    ChipGroup

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

    OverviewPropertiesUsage

    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. Note that the control label is shown only when the available chips do not fit on one line.

    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
    Still have questions?
    Find answers in the Dynatrace Community