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

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

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { default as PropTypes } from 'prop-types';
import { LabelsClassStructure } from '@progress/kendo-react-common';
import * as React from 'react';
/**
 * Represents the props of the KendoReact Label component.
 */
export 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.
     *
     * @remarks
     * This property is related to accessibility.
     */
    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.
     *
     * @remarks
     * This property is related to accessibility.
     */
    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.
     *
     * @remarks
     * This property is related to accessibility.
     */
    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.CSSProperties;
    /**
     * Sets a class of the Label DOM element.
     */
    className?: string;
    /**
     * @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>
 *     );
 * };
 * ```
 */
export declare const Label: {
    (props: LabelProps): React.JSX.Element;
    propTypes: {
        id: PropTypes.Requireable<string>;
        editorId: PropTypes.Requireable<string>;
        editorRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
            current: PropTypes.Requireable<any>;
        }> | null | undefined>>;
        editorValid: PropTypes.Requireable<boolean>;
        editorDisabled: PropTypes.Requireable<boolean>;
        style: PropTypes.Requireable<object>;
        className: PropTypes.Requireable<string>;
        optional: PropTypes.Requireable<boolean>;
    };
    displayName: string;
};