Neura UI

Composable Laravel UI
By Neura UI
Back to Home

Fieldset

Semantic HTML fieldset component for grouping related form fields with optional legend label

Basic Usage

The most basic fieldset with a label grouping related fields:
Personal Information
First Name
Last Name 
<neura::fieldset label="Personal Information">
    <neura::field>
        <neura::label>First Name</neura::label>
        <neura::input type="text" placeholder="John" />
    </neura::field>
    <neura::field>
        <neura::label>Last Name</neura::label>
        <neura::input type="text" placeholder="Doe" />
    </neura::field>
</neura::fieldset>

Without Label

You can use a fieldset without a label for visual grouping only:
Email
Password 
<neura::fieldset>
    <neura::field>
        <neura::label>Email</neura::label>
        <neura::input type="email" placeholder="email@example.com" />
    </neura::field>
    <neura::field>
        <neura::label>Password</neura::label>
        <neura::input type="password" placeholder="Enter password" />
    </neura::field>
</neura::fieldset>

Hidden Label

Use labelHidden to hide the label visually while keeping it accessible to screen readers:
Account Details
Username
Email 
<neura::fieldset label="Account Details" labelHidden>
    ...
</neura::fieldset>

Multiple Fieldsets

Group different sections of a form using multiple fieldsets:
Personal Information
First Name
Last Name
Contact Information
Email
Phone

Use Cases

Registration Form

Account Information
Username
Choose a unique username
Email
Password
Must be at least 8 characters
Personal Details
Full Name
Date of Birth

Settings Form

Profile Settings
Display Name
Bio
Notification Preferences
Email notifications
Push notifications

Best Practices

Do

  • Use fieldsets to group logically related form fields
  • Provide descriptive labels for fieldsets
  • Use fieldsets for accessibility and semantic HTML structure
  • Keep fieldsets focused on a single topic or section

Don't

  • Don't use fieldsets for single fields (use field component instead)
  • Don't nest fieldsets unnecessarily
  • Don't use fieldsets purely for visual grouping without semantic meaning
  • Don't use very long or verbose fieldset labels

Properties

Property Type Default Description
label string|null null Legend label text for the fieldset. Displayed as a legend element.
labelHidden boolean false Hides the label visually while keeping it accessible to screen readers (sr-only class).
class string - Additional CSS classes. Default: rounded-box border border-black/10 p-5 dark:border-white/10 text-start