Form Label

'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

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

Usage

Copyimport { 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

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.