Neura UI

Loading…

Logo
Neura UI
All pages 99

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:
blade
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:
blade
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:
blade
Subscribe to newsletter
Receive weekly updates and special offers in your inbox.
Email notifications
Get notified when someone comments on your posts. 
<neura::field>
                <div class="flex items-start gap-3">
                <neura::checkbox wire:model="newsletter" />
                <div class="min-w-0">
                <neura::label>Subscribe to newsletter</neura::label>
                <neura::description>Receive weekly updates and special offers in your
                inbox.</neura::description>
                </div>
                </div>
                </neura::field>

                <neura::field>
                <div class="flex items-start gap-3">
                <neura::switch wire:model="notifications" />
                <div class="min-w-0">
                <neura::label>Email notifications</neura::label>
                <neura::description>Get notified when someone comments on your posts.</neura::description>
                </div>
                </div>
                </neura::field>

Standalone Usage

While typically used within fields, description can also be used standalone to provide context:
blade

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:
blade
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:
blade
Share usage data
Help us improve by sharing anonymous usage statistics. Your personal information is never shared. 
<neura::field>
                <div class="flex items-start gap-3">
                <neura::checkbox wire:model="shareData" />
                <div class="min-w-0">
                <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>
                </div>
                </div>
                </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