Label

Overview

The Label component provides accessible, styled text labels for form controls. It automatically handles disabled states through peer and group relationships, ensuring consistent styling when associated form controls are disabled.

Import

import { Label } from "@px-ui/core";

Usage

<Label htmlFor="email">Email address</Label>

Examples

With Form Fields

Labels are designed to work seamlessly with all form components. Use the htmlFor prop to associate the label with an input.

<div className="flex flex-col gap-2">
  <Label htmlFor="username">Username</Label>
  <Input id="username" placeholder="Enter your username" />
</div>

<div className="flex items-center gap-2">
  <Checkbox id="remember" />
  <Label htmlFor="remember">Remember me</Label>
</div>

<div className="flex items-center gap-2">
  <Switch id="newsletter" />
  <Label htmlFor="newsletter">Subscribe to newsletter</Label>
</div>

API Reference

Label

A styled label component with automatic disabled state handling.

Inherited Props: Inherits all props from native HTML label element.

Note: The Label component automatically reduces opacity when:

• Its parent element has data-disabled="true"
• Its peer (sibling) element has the disabled attribute