@progress/kendo-react-labels/FloatingLabel.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 { KendoReactComponentBaseProps, LabelsClassStructure } from '@progress/kendo-react-common';
import * as React from 'react';
/**
 * Represents the props of the KendoReact FloatingLabel component.
 */
export 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.
     *
     * @remarks
     * This property is related to accessibility.
     */
    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?: React.ReactNode;
    /**
     * The styles that are applied to the FloatingLabel.
     */
    style?: React.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;
}
/**
 * @hidden
 */
export interface FloatingLabelState {
    focused?: boolean;
}
/**
 * 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>
 *     );
 * };
 * ```
 */
export declare const FloatingLabel: {
    (props: FloatingLabelProps): React.JSX.Element;
    propTypes: {
        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        editorId: PropTypes.Requireable<string>;
        editorValue: PropTypes.Requireable<NonNullable<string | number | boolean | null | undefined>>;
        editorPlaceholder: PropTypes.Requireable<string>;
        editorValid: PropTypes.Requireable<boolean>;
        editorDisabled: PropTypes.Requireable<boolean>;
        id: PropTypes.Requireable<string>;
        style: PropTypes.Requireable<object>;
        className: PropTypes.Requireable<string>;
        labelClassName: PropTypes.Requireable<string>;
        optional: PropTypes.Requireable<boolean>;
    };
};