Label Component

Overview

The Label component provides a styled label element for form fields and other interactive elements. It's designed to be accessible and consistent with your design system.

Basic Usage

import { Label } from '@dashflowx/core'

export default function LabelExample() {
  return (
    <Label htmlFor="input">Email Address</Label>
  )
}

Preview: Email Address

Props

Prop	Type	Default	Description
`htmlFor`	`string`	`''`	The ID of the associated form element
`className`	`string`	`''`	Additional CSS classes for the label
`children`	`ReactNode`	-	The label text content

Examples

Basic Label

import { Label } from '@dashflowx/core'

export default function BasicLabel() {
  return (
    <Label htmlFor="email">Email Address</Label>
  )
}

Preview: Email Address

Styled Label

import { Label } from '@dashflowx/core'

export default function StyledLabel() {
  return (
    <Label 
      htmlFor="password"
      className="text-blue-600 font-semibold"
    >
      Password
    </Label>
  )
}

Preview: Password

Required Label

import { Label } from '@dashflowx/core'

export default function RequiredLabel() {
  return (
    <Label htmlFor="name">
      Full Name <span className="text-red-500">*</span>
    </Label>
  )
}

Preview: Full Name <span className="text-red-500">*</span>

Custom Styled Label

import { Label } from '@dashflowx/core'

export default function CustomStyledLabel() {
  return (
    <Label 
      htmlFor="username"
      className="text-lg font-bold text-purple-600 border-b-2 border-purple-600 pb-1"
    >
      Username
    </Label>
  )
}

Preview: Username

Disabled Label

import { Label } from '@dashflowx/core'

export default function DisabledLabel() {
  return (
    <Label 
      htmlFor="disabled-input"
      className="opacity-50 cursor-not-allowed"
    >
      Disabled Field
    </Label>
  )
}

Preview: Disabled Field

Common Use Cases

Form Field Label

const formFieldLabel = (
  <Label htmlFor="email">
    Email Address
  </Label>
);

Checkbox Label

const checkboxLabel = (
  <Label htmlFor="terms">
    I agree to the terms and conditions
  </Label>
);

Radio Button Label

const radioLabel = (
  <Label htmlFor="option1">
    Option 1
  </Label>
);

Input Group Label

const inputGroupLabel = (
  <div className="space-y-2">
    <Label htmlFor="phone">Phone Number</Label>
    <input 
      id="phone" 
      type="tel" 
      className="w-full px-3 py-2 border border-gray-300 rounded-md"
    />
  </div>
);

Section Label

const sectionLabel = (
  <Label className="text-lg font-semibold text-gray-900">
    Personal Information
  </Label>
);

Best Practices

1. Always Use htmlFor

Associate labels with their form elements for accessibility.

// ✅ Good - Proper association
<Label htmlFor="email">Email</Label>
<input id="email" type="email" />

// ❌ Avoid - Missing association
<Label>Email</Label>
<input type="email" />

2. Descriptive Text

Use clear and descriptive label text.

// ✅ Good - Descriptive
<Label htmlFor="password">Password</Label>

// ❌ Avoid - Unclear
<Label htmlFor="password">Pwd</Label>

3. Consistent Styling

Maintain consistent styling across your application.

// ✅ Good - Consistent styling
<Label className="standard-label-style" />

// ❌ Avoid - Inconsistent styling
<Label className="random-styles" />

4. Required Field Indicators

Clearly indicate required fields.

// ✅ Good - Clear required indicator
<Label htmlFor="name">
  Full Name <span className="text-red-500">*</span>
</Label>

// ❌ Avoid - Unclear required indicator
<Label htmlFor="name">Full Name (required)</Label>

5. Accessible Text

Ensure label text is accessible to all users.

// ✅ Good - Accessible text
<Label htmlFor="email">Email Address</Label>

// ❌ Avoid - Unclear text
<Label htmlFor="email">E-mail</Label>

Customization

Custom Styling

You can customize the label appearance using CSS classes:

<Label 
  htmlFor="input"
  className="text-lg font-bold text-blue-600"
>
  Custom Label
</Label>

Different Themes

Use different themes for different contexts:

// Light theme
<Label className="text-gray-900" />

// Dark theme
<Label className="text-white" />

// Brand theme
<Label className="text-blue-600" />

Size Variations

Use different sizes for different emphasis levels:

// Small label
<Label className="text-sm" />

// Standard label
<Label className="text-base" />

// Large label
<Label className="text-lg" />

Advanced Usage

Dynamic Labels

Create dynamic labels based on state:

const [fieldName, setFieldName] = useState('Email');

<Label htmlFor="input">
  {fieldName} Address
</Label>

Conditional Styling

Apply conditional styling based on state:

const [isRequired, setIsRequired] = useState(true);

<Label 
  htmlFor="input"
  className={isRequired ? 'text-red-600' : 'text-gray-600'}
>
  Field Name {isRequired && <span className="text-red-500">*</span>}
</Label>

Form Validation

Show validation states in labels:

const [isValid, setIsValid] = useState(false);
const [hasError, setHasError] = useState(false);

<Label 
  htmlFor="input"
  className={hasError ? 'text-red-600' : isValid ? 'text-green-600' : 'text-gray-600'}
>
  Email Address
</Label>

Input: For text input fields
Form: For form management
Checkbox: For checkbox inputs
RadioGroup: For radio button groups
Select: For dropdown selections

API Reference

For the complete API reference and advanced usage patterns, see the Label API documentation.