@octopusdeploy/design-system-components/dist/src/components/Form/Primitives/Input.d.ts

The design systems component library.

import * as React from "react";
import { type IconOnlyButtonElement, type IconOnlyButtonProps } from "../../Button";
import type { ValidationDisplayState } from "./InputValidationMessage";
interface InputProps<T> {
    /**
     * The ID of the input
     */
    id: string;
    /**
     * The input type (text, email, password, etc.)
     */
    type: "text" | "email" | "password" | "tel" | "url" | "search" | "number" | "time";
    /**
     * The value of the input
     */
    value?: T;
    /**
     * The placeholder text to display when input is empty
     */
    placeholder?: string;
    /**
     * Whether the field is disabled
     */
    disabled?: boolean;
    /**
     * Whether the field is required
     */
    required?: boolean;
    /**
     * Whether to autofocus the input
     */
    autoFocus?: boolean;
    /**
     * Whether the input is readonly
     */
    readOnly?: boolean;
    /**
     * The name attribute for the input
     */
    name?: string;
    /**
     * The prefix to display before the input - can be a string or a icon it cannot be interactive
     */
    prefix?: string | React.ReactElement;
    /**
     * The suffix to display after the input - can be a string or a button with ghost importance and medium size only
     */
    suffix?: string | React.ReactElement<IconOnlyButtonProps>;
    /**
     * Up to three action buttons displayed inside the input field (the three-action limit is enforced
     * by the type). Each action should be an icon-only Button with ghost importance. Action
     * elements are rendered as supplied — set `disabled` on them yourself when the field is
     * disabled or readonly.
     */
    actions?: readonly [] | readonly [IconOnlyButtonElement] | readonly [IconOnlyButtonElement, IconOnlyButtonElement] | readonly [IconOnlyButtonElement, IconOnlyButtonElement, IconOnlyButtonElement];
    /**
     * The minimum value allowed for number inputs
     */
    min?: number;
    /**
     * The maximum value allowed for number inputs
     */
    max?: number;
    /**
     * The step value for number inputs
     */
    step?: number | "any";
    /**
     * The action to perform when the form control field is changed.
     */
    onChange: (newValue: T) => void;
    /**
     * The function to call when the clear button is pressed.
     * If this is not provided, the clear button will not be shown.
     */
    onClear?: () => void;
    /**
     * Called when the input receives focus
     */
    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
    /**
     * Called when the input loses focus
     */
    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
    /**
     * Called when a key is pressed while the input has focus
     */
    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
    /**
     * The validation state of the input to display.
     */
    validationDisplayState: ValidationDisplayState;
    /**
     * The ID of the element describing the input
     */
    "aria-describedby"?: string;
    /**
     * The ID of the currently active option in a combobox/listbox controlled by this input
     */
    "aria-activedescendant"?: string;
    /**
     * The ID of the element controlled by this input (e.g. an associated listbox)
     */
    "aria-controls"?: string;
    /**
     * Indicates that the input provides autocomplete suggestions from a controlled list
     */
    "aria-autocomplete"?: "list";
    /**
     * The accessible name for the input when no visible label is associated with it
     */
    "aria-label"?: string;
}
export declare const Input: <T extends string | number | undefined>(props: InputProps<T> & {
    ref?: React.Ref<HTMLInputElement>;
}) => React.ReactElement;
export {};