@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
111 lines (110 loc) • 3.96 kB
TypeScript
import { InputHTMLAttributes } from 'react';
import { BreakpointCustomizable } from '../../types';
import { InputSize } from '../Input/Input.utils';
export interface InputNumberProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size' | 'value'> {
/** Unique id for the input. */
id: string;
/** Label text displayed above the input. */
label: string;
/** Text used for assistive technologies when the value changes.
* @default 'Value changed to'
*/
announcementText?: string;
/** Disables the input, preventing user interaction.
* @default false
*/
disabled?: boolean;
/** Decrease amount button props:
*
* `data-*`: Custom data attributes.
*
* `label`: Accessibility label for the decrease button.
* (default) 'Decrease'
*
* `tooltip`: Tooltip text for the decrease button.
*/
decreaseAmountButtonProps?: {
[key: `data-${string}`]: string | undefined;
label?: string;
tooltip?: string;
};
/** 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;
/** Increase amount button props:
*
* `data-*`: Custom data attributes.
*
* `label`: Accessibility label for the increase button.
* (default) 'Increase'
*
* `tooltip`: Tooltip text for the increase button.
*/
increaseAmountButtonProps?: {
[key: `data-${string}`]: string | undefined;
label?: string;
tooltip?: string;
};
/** Marks the input as invalid, typically used for form validation.
* @default false
*/
invalid?: boolean;
/** The maximum value for the input.
* @default 100
*/
max?: number | string;
/** The minimum value for the input.
* @default 0
*/
min?: number | string;
/** The interval between legal numbers of the input.
* @default 1
*/
step?: number | string;
/** Text displayed as a prefix inside the input, maximum 8 characters. */
prefix?: string;
/** 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 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;
/** Value of the input. */
value?: InputHTMLAttributes<HTMLInputElement>['value'];
}
/**
* The `<DSInputNumber />` component is a versatile input field that allows users to easily enter a value and decrease or increase it as needed.
* It comes in two sizes (medium & small) and supports various customizations including a prefix and suffix.
*
* Next to the input field, there are two buttons to increase or decrease the input value.
*
* Design in Figma: [Input Number](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=2141-6769&t=UBsmFURFENnuYSW1-11)
*/
export declare const DSInputNumber: import('react').ForwardRefExoticComponent<InputNumberProps & import('react').RefAttributes<HTMLInputElement>>;