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

Neura UI