React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

StoreLabel

Label component for form inputs with optional chevron icon

Interactive Playground

Customize the label properties and see the changes in real-time

Variants

Different label configurations

Basic Label

Label with Chevron

Long Label Text

Common Use Cases

Typical label implementations in forms

Contact Form

Dropdown with Chevron

API Reference

Props

for

string - The ID of the form element this label is associated with (htmlFor attribute)

chevron

boolean - Shows a chevron icon next to the label text (typically used with select elements)

className

string - Additional CSS classes to apply to the label

children

React.ReactNode - The label text content

Usage Notes

  • Always use the `for` prop to associate the label with its input element for accessibility
  • The chevron icon is typically used with select/dropdown elements to indicate expandable content
  • Labels are styled with the theme's primary foreground color and small bold text
  • The component automatically applies a bottom margin (mb-2) for spacing