@stihl-design-system/components/components/Select/Select.d.ts

Welcome to the STIHL Design System react component library.

import { SelectHTMLAttributes } from 'react';
import { BreakpointCustomizable } from '../../types';
import { SelectOptionsOrOptGroups, SelectSize } from './Select.utils';
export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
    /** Unique id for the select. */
    id: string;
    /** Label text displayed above the select. */
    label: string;
    /**
     * Defines the options, can be a mixed array of options and option groups.
     *  `type SelectOption = {label: string; value: string | number; isDisabled?: boolean;}`
     *  `type SelectOptionsGroup = {label: string; options: SelectOption[];}`
     *  `type SelectOptionsOrOptGroups = (SelectOption | SelectOptionsGroup)[];`
     * */
    options: SelectOptionsOrOptGroups;
    /** Disables the select, preventing user interaction.
     * @default false
     */
    disabled?: boolean;
    /** Hides the select label, can be responsive.
     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
     * @default false
     */
    hideLabel?: BreakpointCustomizable<boolean>;
    /** Short descriptive text displayed beneath the label. */
    hint?: string;
    /** Marks the select as invalid, typically used for form validation.
     * @default false
     */
    invalid?: boolean;
    /** Shows an info button next to the label that triggers a popover with the passed content. */
    popoverContent?: React.ReactNode;
    /** Popover info button props:
     *
     * `data-*`: Custom data attributes.
     *
     * `label`: Accessibility label for the default anchor button.
     * (default) 'Toggle popover'
     */
    popoverInfoButtonProps?: {
        [key: `data-${string}`]: string | undefined;
        label?: string;
    };
    /** Modifies the empty option label to ensure a conscious choice.
     * @default 'Select'
     */
    placeholder?: string;
    /** Indicates that the select is required.
     * @default false
     */
    required?: boolean;
    /** Size of the select.
     * @default 'medium'
     */
    size?: SelectSize;
    /** Defines a system feedback message, shown when `invalid={true}`. */
    systemFeedback?: string;
}
/**
 * Use the DSSelect component to efficiently navigate through and select from a range of options,
 * enhancing user interaction and decision-making in your application.
 *
 * Design in Figma: [Select](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=8139-4888)
 *
 * <div className="ds-alert">If you are looking for a component with a **custom dropdown** or the ability to **filter** and **select multiple options**, please take a look at
 * [DSCombobox](/docs/components-combobox--documentation)</div>
 * */
export declare const DSSelect: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<HTMLSelectElement>>;