import { LabelBasicDemo } from "../../../src/components/label-basic-demo";
import { LabelWithFieldDemo } from "../../../src/components/label-with-field-demo";

## 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

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

## Usage

<Preview>
  <LabelBasicDemo />
</Preview>

<CodeBlock>
  ```tsx
  <Label htmlFor="email">Email address</Label>
  ```
</CodeBlock>

## 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.

<Preview>
  <LabelWithFieldDemo />
</Preview>

<CodeBlock>
  ```tsx
  <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>
  ```
</CodeBlock>

## API Reference

### Label

A styled label component with automatic disabled state handling.

| Prop        | Type     | Default | Description                                          |
| ----------- | -------- | ------- | ---------------------------------------------------- |
| `htmlFor`   | `string` | -       | ID of the form control this label is associated with |
| `className` | `string` | -       | Additional CSS classes                               |

**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