Logo
Neura
Back to Home

Getting Started

Introduction
Installation
Usage
Dark Mode
Theming
Layouts

Components

Atoms

Form Elements

Field
Label
Description
Fieldset
Form
Input
Textarea
Select
Autocomplete
Calendar
Date Picker
Rich Editor
Checkbox
Radio
Switch
OTP
Dropzone
Tags Input

Layout

Container
Grid
Stack
Box
Card
Divider
Spacer

Navigation

Navlist
Link

Feedback

Alert
Callout
Toast
Dialog
Modal
Popover

Content

Text
Heading
Brand
Lottie
Skeleton

Data Display

Table
Chart
Kanban
Image Gallery
Tabs
Accordion
Badge
Avatar

Actions

Button
Command Palette
Composer
Context Menu
Dropdown

Utilities

Theme Switcher
Wizard

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