React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

StoreLegend

A legend component for labeling fieldset groups in forms

Interactive Playground

Customize the legend text and see the changes in real-time

Form Section

Common Use Cases

Different legend examples for form sections

Personal Information Section

Personal Information

Payment Details Section

Payment Details

Shipping Address Section

Shipping Address

Contact Preferences Section

Contact Preferences

API Reference

Props

children

React.ReactNode - The legend text content

Features

  • Semantic HTML legend element styling
  • Small bold label typography (style-text-label-sm-bold)
  • Theme-aware text color (text-fg-primary)
  • Consistent spacing with margin-bottom
  • Full width display (w-full)
  • Block-level element for proper form structure

Usage Notes

Semantic HTML: This component renders a span element with legend-like styling. Use it within StoreFieldset components to label form sections.

Typography: Uses the style-text-label-sm-bold class for consistent small, bold label styling across the application.

Spacing: Includes mb-2 (margin-bottom) to provide appropriate spacing between the legend and form fields.

Typical Usage: Place this component as the first child of a StoreFieldset to provide a descriptive label for grouped form inputs.