Label Component

A form label component that is accessible, customizable, and properly associates with form controls.

  • Automatically links to form controls with matching id
  • Properly handles disabled states
  • Supports required field indicator
  • Follows accessibility best practices

Installation

The Label component is part of our UI library. You can import it directly from the components directory.

Usage

Here is how to use the label in your project.

React TSX
1import { Label } from "@/components/modern-ui/label"

React TSX
1<Label htmlFor="email">Email</Label>
2<input id="email" type="email" />

Examples

Basic Label

API Reference

Label

PropTypeDefaultDescription
htmlForstring-The id of the form control to associate with
classNamestring-Additional CSS classes
disabledbooleanfalseWhether the label is disabled
childrenReactNode-The content of the label

Additionally, all standard HTML label attributes are supported.