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

Welcome to the STIHL Design System react component library.

import { TextareaHTMLAttributes } from 'react';
import { BreakpointCustomizable } from '../../types';
import { TextareaSize } from './Textarea.utils';
export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'rows' | 'cols'> {
    /** Unique id for the textarea. */
    id: string;
    /** Label text displayed above the textarea. */
    label: string;
    /** Text displayed when maximum characters are reached.
     * @default 'Character limit reached'
     */
    charsLimitText?: string;
    /** Text used for assistive technologies when the characters remaining amount changes.
     * @default 'Characters remaining:'
     */
    charsRemainingText?: string;
    /** Disables the textarea, preventing user interaction.
     * @default false
     */
    disabled?: boolean;
    /** Hides the textarea 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 textarea as invalid, typically used for form validation.
     * @default false
     */
    invalid?: boolean;
    /** Maximum length of the textarea value - if set, a character counter is visible beneath the textarea. */
    maxLength?: number;
    /** 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;
    };
    /** Enables the readonly state of the textarea.
     * @default false
     */
    readonly?: boolean;
    /** Indicates that the textarea is required.
     * @default false
     */
    required?: boolean;
    /** Controls whether the textarea is resizable manually or automatically adjusts to user input.
     * @default 'vertical'
     */
    resize?: 'vertical' | 'auto';
    /** Defines a system feedback message, shown when `invalid={true}`. */
    systemFeedback?: string;
    /** Size of the textarea.
     * @default 'medium'
     */
    size?: TextareaSize;
    /** CSS className that can be set on the wrapping container of `<DSTextarea />`.  */
    wrapperClassName?: string;
}
/**
 * The `<DSTextarea />` component allows users to enter and edit multi line text.
 * It comes in two sizes (medium & small) and supports various customizations
 *
 * Design in Figma: [Textarea](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=4937-4402)
 */
export declare const DSTextarea: import('react').ForwardRefExoticComponent<TextareaProps & import('react').RefAttributes<HTMLTextAreaElement>>;