@progress/kendo-react-labels/README.md

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

[![KendoReact NPM Banner](https://raw.githubusercontent.com/telerik/kendo-react/master/images/kendoreact-github-banner.png)](https://www.telerik.com/kendo-react-ui/components/free?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-labels&utm_content=banner)

# KendoReact Labels Library for React

> **Important**
>
> -   This package is а part of [KendoReact](https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-labels)—an enterprise-grade UI library with 120+ free and premium components.
> -   This package contains free KendoReact components. You can use it even in production, no sign-up or license required. If you're looking for more free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free).
> -   Installing and working with this package indicates that you [accept the KendoReact License Agreement](https://www.telerik.com/purchase/license-agreement/progress-kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-labels).
> -   The [30-day free trial](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-labels) gives you access to all KendoReact components and their full functionality. Additionally, for the period of your trial, you can use our legendary technical support provided directly by the KendoReact dev team!

The React Labels package, part of KendoReact Free, provides components for labeling form editors.

How to start:

```sh
npm i @kendo-react-labels
```

What's in this package:

-   [React FloatingLabel component (free)](#react-floatinglabel-component)
-   [React Label component (free)](#react-label-component)
-   [React Hint component (free)](#react-hint-component)
-   [React Error component (free)](#react-error-component)

Additional information:

-   [Support Options](#support-options)
-   [Resources](#resources)
-   [KendoReact Labels API](https://www.telerik.com/kendo-react-ui/components/labels/api)

## React FloatingLabel Component

> This is a **free React component**—no sign-up or license required.

[The KendoReact FloatingLabel component](https://www.telerik.com/kendo-react-ui/components/labels/floating-label/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-labels) lets developers take advantage of floating labels for both form elements and custom focusable elements.

How to use the FloatingLabel component in your apps:

```tsx
import { FloatingLabel } from '@progress/kendo-react-labels';
...

<FloatingLabel label={'This is a floating label'}>
    /**
    * Wrap the FloatingLabel around the component for which you want to show the FloatingLabel. All label components are intended for use with input components.
    */
</FloatingLabel>
```

## React Label Component

> This is a **free React component**&mdash;no sign-up or license required.

[The KendoReact Label component](https://www.telerik.com/kendo-react-ui/components/labels/label/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-labels) adds additional functionality on top of a traditional label HTML element and enables label functionality for any React component.

How to use the Label component in your apps:

```tsx
import { Label } from '@progress/kendo-react-labels';
...
<Label>
    This is a label.
</Label>
/**
* Place the Label before or after the input component for which you want to show the Label. All label components are intended for use with input components.
*/
```

## React Hint Component

> This is a **free React component**&mdash;no sign-up or license required.

[The KendoReact Hint component](https://www.telerik.com/kendo-react-ui/components/labels/hint/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-labels) enables developers to display a hint message below any input element in your React applications, providing additional useful information to the user.

How to use the Hint component in your apps:

```tsx
import { Hint } from '@progress/kendo-react-labels';
...
<Hint>
    This is a label.
</Hint>
/**
* Place the Hint close to the input component for which you want to show the Hint. All label components are intended for use with input components.
*/
```

## React Error Component

[The KendoReact Error component](https://www.telerik.com/kendo-react-ui/components/labels/error/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-labels) provides additional text to display under React components to deliver error messages.

How to use the Error component in your apps:

```tsx
import { Error } from '@progress/kendo-react-labels';
...
<Error>
    This is an error.
</Error>
/**
* Place the Error close to the input component for which you want to show the Error. All label components are intended for use with input components.
*/
```

## Support Options

For any issues you might encounter while working with the KendoReact Internationalization, use any of the available support channels:

-   Industry-leading technical support&mdash;KendoReact paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use [the dedicated KendoReact support system](https://www.telerik.com/account/support-center/contact-us/technical-support?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-labels).
-   Product forums&mdash;The [KendoReact forums](https://www.telerik.com/forums/kendo-ui-react?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-labels) are part of the free support you can get from the community and from the KendoReact team.
-   Feedback portal&mdash;The [KendoReact feedback portal](https://feedback.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-labels) is where you can request and vote for new features to be added.

## Resources

-   [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-labels)
-   [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free)
-   [KendoReact Roadmap](https://www.telerik.com/support/whats-new/kendo-react-ui/roadmap?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-labels)
-   [Blogs](https://www.telerik.com/blogs/tag/kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-labels)
-   [Demos, documentation, and component reference](https://www.telerik.com/kendo-react-ui/components/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-labels)
-   [KendoReact pricing and licensing](https://www.telerik.com/kendo-react-ui/pricing?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-labels)
-   [Changelog](https://www.telerik.com/kendo-react-ui/components/changelogs/ui-for-react/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-labels)

_Copyright © 2025 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved._

High-level component overview pages

-   [React Error Component](https://www.telerik.com/kendo-react-ui/error)
-   [React Floating Label Component](https://www.telerik.com/kendo-react-ui/floating-labels)
-   [React Hint Component](https://www.telerik.com/kendo-react-ui/hint)
-   [React Label Component](https://www.telerik.com/kendo-react-ui/labels)

_Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries._