---
title: Form Label
description: A flexible label component for form fields with support for required indicators, descriptions, and layout options
---

```tsx
'use client';

import { FormLabel } from '@/ui/forms/FormLabel';

export function FormLabelDemo() {
  return (
    <FormLabel id="email" required description="We'll never share your email" layout="horizontal">
      Email Address
    </FormLabel>
  );
}
```

## Installation

Using the CLI:

```bash
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/form-label.json
```

Or manually, copy the following code into `/ui/forms/form-label.tsx`:

```tsx
import clsx from 'clsx';
import type { LabelHTMLAttributes } from 'react';

export interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
  description?: string;
  layout?: 'horizontal' | `horizontal-${string}` | 'vertical';
  required?: boolean;
  hideRequiredStar?: boolean;
}

export const FormLabel = ({
  id,
  description,
  layout = 'horizontal',
  required,
  className,
  children,
  hideRequiredStar = !required,
  ...rest
}: FormLabelProps) => {
  return (
    <label
      {...rest}
      htmlFor={id}
      className={clsx(
        'text-b3 font-semibold text-black flex',
        {
          'ps-20': layout === 'horizontal' && !layout.includes('no-padding'),
          'flex-wrap items-center': layout.includes('horizontal'),
          'flex-col items-start': layout.includes('vertical'),
        },
        className,
      )}
      data-name="InputLabel"
    >
      {children}
      {required && !hideRequiredStar && <span>*</span>}
      {description && (
        <span
          className={clsx('text-b4 text-darkGrey font-normal', {
            'ms-12': layout.includes('horizontal'),
          })}
        >
          {description}
        </span>
      )}
    </label>
  );
};
```

## Usage

```tsx showLineNumbers
import { FormLabel } from '@/docs/lib/ui/forms/form-label';

export function Component() {
  return (
    <FormLabel id="email" required description="Optional helper text" layout="horizontal">
      Email Address
    </FormLabel>
  );
}
```

## API Reference

### FormLabel

| Prop               | Type                                                   | Default        | Description                                                                                      |
| ------------------ | ------------------------------------------------------ | -------------- | ------------------------------------------------------------------------------------------------ |
| `id`               | `string`                                               | `undefined`    | The ID of the form field this label is associated with (sets `htmlFor`)                          |
| `children`         | `ReactNode`                                            | `undefined`    | The label text content                                                                           |
| `description`      | `string`                                               | `undefined`    | Optional descriptive text displayed alongside the label                                          |
| `layout`           | `"horizontal" \| "horizontal-${string}" \| "vertical"` | `"horizontal"` | Controls the label's layout and spacing. Use `"horizontal-no-padding"` to remove default padding |
| `required`         | `boolean`                                              | `undefined`    | Whether the field is required. Shows an asterisk (\*) when true                                  |
| `hideRequiredStar` | `boolean`                                              | `!required`    | Hides the required asterisk even when `required` is true                                         |
| `className`        | `string`                                               | `undefined`    | Additional CSS classes to apply to the label element                                             |
| ...rest            | `LabelHTMLAttributes<HTMLLabelElement>`                | -              | All standard HTML label attributes are supported                                                 |

## Notes

- **Layout Options**: The component supports flexible layout modes:

  - `"horizontal"`: Default horizontal layout with left padding (`ps-20`) and centered items
  - `"horizontal-no-padding"`: Horizontal layout without left padding
  - `"vertical"`: Stacks label and description vertically with left alignment
  - Custom horizontal variants: Any string starting with `"horizontal-"` follows horizontal layout rules

- **Required Indicator**: When `required` is true, an asterisk (\*) is automatically displayed after the label text. Use `hideRequiredStar` to hide it if needed. By default, `hideRequiredStar` is `!required`, meaning the star is only shown when the field is required.

- **Description Text**: Optional helper text can be displayed alongside the label using the `description` prop. It appears with lighter styling (`text-grey`, `font-normal`, `text-b4`) and left margin (`ms-12`).

- **Semantic HTML**: Renders as a native `<label>` element with proper `htmlFor` attribute linking to the form field via the `id` prop.

- **Accessibility**: The component ensures proper form field association through the `htmlFor` attribute, improving accessibility for screen readers and enabling click-to-focus behavior.

- **Styling**: The component applies base styles including semibold font weight, black text color, and flexible layout classes. Custom styles can be added via the `className` prop.

- **Data Attributes**: Includes `data-name="InputLabel"` for testing and debugging purposes.

- **Standard Attributes**: All standard HTML label attributes (like `onClick`, `onMouseEnter`, etc.) are supported through prop spreading.