@progress/kendo-react-labels/index.d.ts

React Labels package provides components for labelling form editors. KendoReact Labels package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { default as default_2 } from 'prop-types';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
import { LabelsClassStructure } from '@progress/kendo-react-common';
import * as React_2 from 'react';

/**
 * Represents the KendoReact Error component.
 * Render the error text that will be shown underneath the form editor after a validation.
 */
declare const Error_2: {
    (props: ErrorProps): JSX_2.Element;
    propTypes: {
        id: default_2.Requireable<string>;
        direction: default_2.Requireable<string>;
        children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
        style: default_2.Requireable<object>;
        className: default_2.Requireable<string>;
    };
    displayName: string;
};
export { Error_2 as Error }

/**
 * Represents the props of the KendoReact Error component.
 */
export declare interface ErrorProps {
    /**
     * Represents the id of the Error element.
     * The value should be also set to the editor's `ariaDescribedBy` property.
     */
    id?: string;
    /**
     * Specifies the alignment of the Error text.
     *
     * The possible values are:
     * * (Default) `start`
     * * `end`
     */
    direction?: 'start' | 'end';
    /**
     * Determines the children nodes.
     */
    children: any;
    /**
     * The styles that are applied to the Error.
     */
    style?: React_2.CSSProperties;
    /**
     * Sets a class of the Error DOM element.
     */
    className?: string;
    /**
     * @hidden
     */
    unstyled?: LabelsClassStructure;
}

/**
 * Represents the KendoReact FloatingLabel component.
 *
 * @example
 * ```jsx
 * const sizes = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
 * const App = () => {
 *     const [ddlState, setDdlState] = React.useState();
 *     const editorId = 'ddl-sizes';
 *     return (
 *         <FloatingLabel label={'Shirt Size:'} editorId={editorId} editorValue={ddlState}>
 *             <DropDownList
 *                 id={editorId}
 *                 value={ddlState}
 *                 data={sizes}
 *                 onChange={(e) => setDdlState(e.target.value)}
 *             />
 *         </FloatingLabel>
 *     );
 * };
 *
 * ReactDOM.render(<App />, document.querySelector('my-app'));
 * ```
 */
export declare const FloatingLabel: {
    (props: FloatingLabelProps): JSX_2.Element;
    propTypes: {
        label: default_2.Requireable<string>;
        editorId: default_2.Requireable<string>;
        editorValue: default_2.Requireable<NonNullable<string | number | boolean | null | undefined>>;
        editorPlaceholder: default_2.Requireable<string>;
        editorValid: default_2.Requireable<boolean>;
        editorDisabled: default_2.Requireable<boolean>;
        id: default_2.Requireable<string>;
        style: default_2.Requireable<object>;
        className: default_2.Requireable<string>;
        labelClassName: default_2.Requireable<string>;
        optional: default_2.Requireable<boolean>;
    };
};

/**
 * Represents the props of the KendoReact FloatingLabel component.
 */
export declare interface FloatingLabelProps extends KendoReactComponentBaseProps {
    /**
     * Represent the [`htmlFor`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) property, which will be set to the `label` element.
     */
    editorId?: string;
    /**
     * Specifies the value of the editor. Used to define if the editor is empty.
     */
    editorValue?: any;
    /**
     * Specifies the placeholder of the editor. Used to define if the editor is empty.
     */
    editorPlaceholder?: string;
    /**
     * Specifies if the validity of the editor. Used to define the editor is invalid.
     */
    editorValid?: boolean;
    /**
     * Specifies if the editor is disabled.
     */
    editorDisabled?: boolean;
    /**
     * Adds a floating label that describes the editor.
     */
    label?: string;
    /**
     * The styles that are applied to the FloatingLabel.
     */
    style?: React_2.CSSProperties;
    /**
     * Sets a class of the FloatingLabel DOM element.
     */
    className?: string;
    /**
     * Sets the `className` of the label DOM element.
     */
    labelClassName?: string;
    /**
     * Specifies the direction of the label.
     */
    dir?: string;
    /**
     * Represents the id of the label element.
     * The value should be also set to the editor's `ariaLabelledBy` property.
     * Can be used when the editor is not containing native form element.
     */
    id?: string;
    /**
     * If enabled, marks the label as optional.
     */
    optional?: boolean;
    /**
     * @hidden
     */
    unstyled?: LabelsClassStructure;
}

/**
 * Represents the KendoReact Hint component.
 * Render the hint text that will be shown underneath the form editor.
 */
export declare const Hint: {
    (props: HintProps): JSX_2.Element;
    propTypes: {
        id: default_2.Requireable<string>;
        direction: default_2.Requireable<string>;
        children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
        style: default_2.Requireable<object>;
        className: default_2.Requireable<string>;
        editorDisabled: default_2.Requireable<boolean>;
    };
    displayName: string;
};

/**
 * Represents the props of the KendoReact Hint component.
 */
export declare interface HintProps {
    /**
     * Represents the id of the Hint element.
     * The value should be set to the editor `ariaDescribedBy` property.
     */
    id?: string;
    /**
     * Spcifies the alignment of the Hint text.
     *
     * The possible values are:
     * *(Default) `start`
     * * `end`
     */
    direction?: 'start' | 'end';
    /**
     * @hidden
     */
    children: any;
    /**
     * The styles that are applied to the Hint.
     */
    style?: React_2.CSSProperties;
    /**
     * Sets a class of the Hint DOM element.
     */
    className?: string;
    /**
     * Specifies if the editor is disabled.
     */
    editorDisabled?: boolean;
    /**
     * @hidden
     */
    unstyled?: LabelsClassStructure;
}

/**
 * Represents the KendoReact Label component.
 *
 * @example
 * ```jsx
 * const sizes = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
 * const App = () => {
 *     const ddlRef = React.useRef(null);
 *     const labelId = 'ddl-sizes-label';
 *     const editorId = 'ddl-sizes';
 *
 *     return (
 *         <div>
 *             <Label id={labelId} editorId={editorId} editorRef={ddlRef}>
 *                 Shirt Size:
 *             </Label>
 *             <DropDownList
 *                 ref={ddlRef}
 *                 id={editorId}
 *                 ariaLabelledBy={labelId}
 *                 data={sizes}
 *             />
 *             <br />
 *         </div>
 *     );
 * };
 *
 * ReactDOM.render(<App />, document.querySelector('my-app'));
 * ```
 */
export declare const Label: {
    (props: LabelProps): JSX_2.Element;
    propTypes: {
        id: default_2.Requireable<string>;
        editorId: default_2.Requireable<string>;
        editorRef: default_2.Requireable<NonNullable<((...args: any[]) => any) | default_2.InferProps<{
            current: default_2.Requireable<any>;
        }> | null | undefined>>;
        editorValid: default_2.Requireable<boolean>;
        editorDisabled: default_2.Requireable<boolean>;
        style: default_2.Requireable<object>;
        className: default_2.Requireable<string>;
        optional: default_2.Requireable<boolean>;
    };
    displayName: string;
};

/**
 * Represents the props of the KendoReact Label component.
 */
export declare interface LabelProps {
    /**
     * Represents the id of the label element.
     * The value should be set to the editor `ariaLabelledBy` property.
     * Can be used when the editor is not containing native form element.
     */
    id?: string;
    /**
     * The id of the editor.
     * Represent the [`htmlFor`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) property, which will be set to the `label` element.
     */
    editorId?: string;
    /**
     * An optional React ref to the editor.
     * Used to redirect the click event to the editor when it does not contain native form element.
     * To be able to work, the editor should have `focus` method or `actionElement` prop on it's ref.
     */
    editorRef?: any;
    /**
     * The text that will be rendered inside the label element.
     * Can be omitted for editors without label to keep form layout.
     */
    children?: any;
    /**
     * Specifies the validity of the editor. Used to define the editor is invalid.
     */
    editorValid?: boolean;
    /**
     * Specifies if the editor is disabled.
     */
    editorDisabled?: boolean;
    /**
     * If enabled marks the label as optional.
     */
    optional?: boolean;
    /**
     * The styles that are applied to the Label.
     */
    style?: React_2.CSSProperties;
    /**
     * Sets a class of the Label DOM element.
     */
    className?: string;
    /**
     * @hidden
     */
    unstyled?: LabelsClassStructure;
}

export { }