@itwin/itwinui-react/cjs/core/LabeledInput/LabeledInput.d.ts

A react component library for iTwinUI

import * as React from 'react';
import { Input } from '../Input/Input.js';
import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
import { InputGrid } from '../InputGrid/InputGrid.js';
import { Icon } from '../Icon/Icon.js';
export type LabeledInputProps = {
    /**
     * Label of the input.
     */
    label?: React.ReactNode;
    /**
     * Message below the input. Does not apply to 'inline' input.
     */
    message?: React.ReactNode;
    /**
     * Status of the input.
     */
    status?: 'positive' | 'warning' | 'negative';
    /**
     * Custom svg icon. Will override status icon if specified.
     */
    svgIcon?: React.JSX.Element | null;
    /**
     * Pass props to wrapper element.
     */
    wrapperProps?: React.ComponentProps<typeof InputGrid>;
    /**
     * Set display style of label.
     * Supported values:
     * - 'default' - label appears above input.
     * - 'inline' - appears in the same line as input.
     * @default 'default'
     */
    displayStyle?: 'default' | 'inline';
    /**
     * Passes properties for message content.
     */
    messageContentProps?: React.ComponentPropsWithRef<'div'>;
    /**
     * Passes properties for icon.
     */
    iconProps?: React.ComponentProps<typeof Icon>;
    /**
     * Passes properties for label.
     */
    labelProps?: React.ComponentProps<'label'>;
    /**
     *  Passes properties for input wrapper.
     */
    inputWrapperProps?: React.ComponentPropsWithRef<'div'>;
} & React.ComponentProps<typeof Input>;
/**
 * Basic labeled input component
 * @example
 * <LabeledInput label='My label' />
 * <LabeledInput disabled label='My label' />
 * <LabeledInput status='positive' label='Positive' />
 * <LabeledInput status='negative' label='Negative' />
 */
export declare const LabeledInput: PolymorphicForwardRefComponent<"input", LabeledInputProps>;