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

Welcome to the STIHL Design System react component library.

import { InputHTMLAttributes } from 'react';
import { BreakpointCustomizable, IconName } from '../../types';
import { IconProps } from '../Icon/Icon';
import { InputSize, SupportedInputTypes } from './Input.utils';
export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
    /** Unique id for the input. */
    id: string;
    /** Label text displayed above the input. */
    label: string;
    /** Action button props:
     *
     * `label`: Accessibility label for the action button or icon.
     *
     * `data-*`: Custom data attributes.
     *
     * `iconName`: Name of the icon used in the action button.
     *
     * `iconSource`: Custom source URL for the action button icon.
     *
     * `onClick`: Callback function called when the action button is clicked.
     */
    actionButtonProps?: {
        label: string;
        [key: `data-${string}`]: string | undefined;
        iconName?: IconName;
        iconSource?: string;
        onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
    };
    /**
     * Provides hints to the browser for what type of data the input expects.
     * Use standardized values from the W3C specification for input purposes:
     * https://www.w3.org/TR/WCAG21/#input-purposes.
     */
    autoComplete?: string;
    /** Disables the input, preventing user interaction.
     * @default false
     */
    disabled?: boolean;
    /** Hides the input 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;
    /** Name of the leading icon. */
    leadingIconName?: IconName;
    /** URL or path for a custom leading icon. */
    leadingIconSource?: IconProps['source'];
    /** Marks the input 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;
    };
    /** Text displayed as a prefix inside the input, maximum 8 characters. */
    prefix?: string;
    /** Enables the readonly state of the input.
     * @default false
     */
    readonly?: boolean;
    /** Indicates that the input is required.
     * @default false
     */
    required?: boolean;
    /** Text displayed as a suffix inside the input, maximum 5 characters. */
    suffix?: string;
    /** Defines a system feedback message, shown when `invalid={true}`. */
    systemFeedback?: string;
    /** Size of the input.
     * @default 'medium'
     */
    size?: InputSize;
    /** Type of the input.
     * @default 'text'
     */
    type?: SupportedInputTypes;
}
/**
 * The `<DSInput />` component is a versatile input field that allows users to enter and edit text.
 * It comes in two sizes (medium & small) and supports various customizations including an action button,
 * a leading icon, prefix and suffix.
 *
 * Depending on the `type` prop it expects different input types.
 *
 * Design in Figma: [Input](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=1744-7211&t=UBsmFURFENnuYSW1-4)
 */
export declare const DSInput: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;