Description
Helper text component for providing additional context and information below form fields or other UI elements
Basic Usage
The most basic description component used within a field:
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 Form Fields
Description components are commonly used within form fields to provide helpful context:
Email Address
We'll never share your email with anyone else.
Password
Must be at least 8 characters with uppercase, lowercase, and numbers.
Phone Number
Include country code. We'll use this for two-factor authentication.
<neura::field>
<neura::label>Email Address</neura::label>
<neura::input type="email" placeholder="your@email.com" />
<neura::description>We'll never share your email with anyone else.</neura::description>
</neura::field>
<neura::field>
<neura::label>Password</neura::label>
<neura::input type="password" placeholder="Enter password" />
<neura::description>Must be at least 8 characters with uppercase, lowercase, and numbers.</neura::description>
</neura::field>With Other Components
Description can be used with various form components like checkboxes, radio buttons, and switches:
Subscribe to newsletter
Receive weekly updates and special offers in your inbox.
Email notifications
Get notified when someone comments on your posts.
<neura::field>
<neura::checkbox wire:model="newsletter" />
<neura::label>Subscribe to newsletter</neura::label>
<neura::description>Receive weekly updates and special offers in your inbox.</neura::description>
</neura::field>
<neura::field>
<neura::switch wire:model="notifications" />
<neura::label>Email notifications</neura::label>
<neura::description>Get notified when someone comments on your posts.</neura::description>
</neura::field>Standalone Usage
While typically used within fields, description can also be used standalone to provide context:
Account Settings
Manage your account preferences and privacy settings here.
<neura::heading level="h3" size="md">Account Settings</neura::heading>
<neura::description>Manage your account preferences and privacy settings here.</neura::description>Use Cases
Here are some common use cases for the description component:
Form Validation Help
Use descriptions to provide clear validation requirements before users submit forms:
Password
Password must contain at least 8 characters, one uppercase letter, one lowercase letter, and one number.
<neura::field>
<neura::label>Password</neura::label>
<neura::input type="password" placeholder="Enter password" />
<neura::description>Password must contain at least 8 characters, one uppercase letter, one lowercase letter, and one number.</neura::description>
</neura::field>Privacy Information
Provide reassurance about privacy and data handling:
Share usage data
Help us improve by sharing anonymous usage statistics. Your personal information is never shared.
<neura::field>
<neura::checkbox wire:model="shareData" />
<neura::label>Share usage data</neura::label>
<neura::description>Help us improve by sharing anonymous usage statistics. Your personal information is never shared.</neura::description>
</neura::field>Best Practices
Do
- Keep descriptions concise and helpful
- Use descriptions to clarify validation rules
- Provide examples when helpful
- Explain the purpose or benefit of a field
Don't
- Don't use descriptions for critical information (use error messages)
- Don't make descriptions too long or verbose
- Don't repeat information that's already in the label
- Don't use descriptions for required field indicators
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| class | string | - | Additional CSS classes. Default styling: text-sm text-neutral-500 dark:text-neutral-400 |