React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

StoreFieldset

Semantic grouping component for related form fields with automatic spacing

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

Fieldset Name (data-name)

First Name

Last Name

Typical fieldset implementations in forms

Full Name

Email Address

Phone Number

Street Address

City

ZIP Code

Notification Frequency

Daily

Weekly

Monthly

Key characteristics of the StoreFieldset component

✓Automatic Spacing: Applies consistent vertical spacing (space-y-4) between child elements
✓Semantic HTML: Uses native fieldset element for proper form semantics and accessibility
✓Auto-hide When Empty: Automatically hides when it has no children (empty:hidden)
✓Responsive Width: Constrains maximum width while allowing flexibility (max-w-full min-w-0)
✓Data Attribute: Optional name prop adds data-name attribute for testing/debugging

name

string (optional) - Identifier for the fieldset, added as a data-name attribute for testing/debugging purposes

children

React.ReactNode - Form fields and other content to group together

Use StoreFieldset to group related form fields together semantically
The component automatically applies spacing between children - no need to add margins manually
Perfect for organizing complex forms into logical sections
Works well with StoreLabel, StoreInput, and other form components
The name prop is useful for identifying fieldsets in tests or debugging