Field
Container component for form fields that manages spacing and layout of labels, inputs, descriptions, and error messages
Basic Usage
The field component wraps form elements and manages their spacing automatically:
Name
<neura::field>
<neura::label>Name</neura::label>
<neura::input type="text" placeholder="Enter your name" />
</neura::field>With Description
Add a description to provide additional context. The field component automatically adjusts spacing:
Username
Choose a unique username for your account
<neura::field>
<neura::label>Username</neura::label>
<neura::input type="text" placeholder="johndoe" />
<neura::description>Choose a unique username for your account</neura::description>
</neura::field>With Error Message
Field components automatically handle error message spacing:
Email
<neura::field>
<neura::label>Email</neura::label>
<neura::input type="email" placeholder="email@example.com" />
<neura::error>Please enter a valid email address</neura::error>
</neura::field>Required Field
Mark a field as required using the required prop:
Full Name
<neura::field required>
<neura::label>Full Name</neura::label>
<neura::input type="text" placeholder="John Doe" />
</neura::field>Disabled Field
Disable a field using the disabled prop. The label will automatically be dimmed:
Account ID
This field cannot be changed after account creation.
<neura::field disabled>
<neura::label>Account ID</neura::label>
<neura::input type="text" value="ACC-12345" disabled />
<neura::description>This field cannot be changed after account creation.</neura::description>
</neura::field>Complete Form Example
Full Name
Email
We'll never share your email with anyone else.
Password
Must be at least 8 characters long.
Data Slots
The field component uses data slots to automatically detect and space child elements:
data-slot="label"- Label element (automatically applied by label component)data-slot="description"- Description text (automatically applied by description component)data-slot="error"- Error message (automatically applied by error component)data-slot="control"- Form control (input, select, etc.)
Automatic Spacing
The field component automatically manages spacing between elements:
- Label gets default margin-bottom (reduced when followed by description)
- Description spacing is tight after label, normal after other elements
- Error messages have consistent top margin
- Labels are automatically dimmed when the field is disabled
Use Cases
Registration Form
Email Address
We'll send a verification email to this address.
Password
Use at least 8 characters with a mix of letters, numbers, and symbols.
Settings Form
Display Name
This is how your name will appear to other users.
Account ID
Your unique account identifier. This cannot be changed.
Best Practices
Do
- Always wrap form controls in a field component for consistent spacing
- Use the required prop to mark required fields
- Provide descriptions for fields that need clarification
- Use error components within fields for validation feedback
Don't
- Don't manually add spacing between field elements
- Don't use field for non-form content
- Don't nest multiple field components unnecessarily
- Don't override field spacing with custom margins
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| required | boolean | false | Marks the field as required. Passed to child label component. |
| disabled | boolean | false | Disables the field and dims the label automatically. |
| class | string | - | Additional CSS classes. Default: min-w-0 w-full text-start |