@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
49 lines (48 loc) • 2.31 kB
TypeScript
import { HTMLAttributes } from 'react';
import { BreakpointCustomizable } from '../../types';
import { Chip, ChipGroupAriaTranslations, ChipGroupLanguage, ChipGroupSelectionMode, ChipGroupSize } from './ChipGroup.utils';
export interface ChipGroupProps extends HTMLAttributes<HTMLDivElement> {
/** An array of Chip Objects containing the id and label and other optional parameters.
* `{id: string; label: string; disabled?: boolean; iconName?: IconName; isSelected?: boolean; onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;}[]`*/
chips: Chip[];
/** Unique id for the DSChipGroup. */
id: string;
/** Label text displayed above the DSChipGroup. */
label: string;
/** Disables tooltips for all chips in the group.
* @default false
*/
disableTooltips?: boolean;
/** Hides the DSChipGroup label, can be responsive.
* `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
* @default false
*/
hideLabel?: BreakpointCustomizable<boolean>;
/** Allows removal of Chips.
* @default false
*/
isRemovable?: boolean;
/** Sets language to use for the screen reader messages, if no translations object is provided.
* @default 'en'
*/
lang?: ChipGroupLanguage;
/** Defines if only one Chip or multiple Chips can be selected. Ignored if `isRemovable=true`.
* @default 'single'
*/
selectionMode?: ChipGroupSelectionMode;
/** Size of the Chips.
* @default 'medium'
*/
size?: ChipGroupSize;
/** Translations for the DSChipGroup. Use our [customization page](/?path=/story/components-chip-group-translations--documentation) for creating custom translations. */
translations?: ChipGroupAriaTranslations;
/** Callback function called when the selection of the DSChipGroup changes. */
onChipsChange?: (chips: Chip[]) => void;
}
/**
* A component for selecting single or multiple chips, with options for selection (like radio buttons) or removal.
* Supports different sizes. Use icons sparingly to reduce cognitive load.
*
* Design in Figma: [Chip Group](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=18691-978)
*/
export declare const DSChipGroup: React.FC<ChipGroupProps>;