Description

Helper text displayed below an input to provide hints, instructions, or additional context.

Basic description

<x-boson::field>
    <x-boson::label for="username">Username</x-boson::label>
    <x-boson::input id="username" name="username" />
    <x-boson::description>Must be between 3 and 20 characters.</x-boson::description>
</x-boson::field>

With password input

<x-boson::field>
    <x-boson::label for="password">Password</x-boson::label>
    <x-boson::input id="password" name="password" type="password" />
    <x-boson::description>Must be at least 8 characters with one uppercase letter and one number.</x-boson::description>
</x-boson::field>

With textarea

<x-boson::field>
    <x-boson::label for="bio">Bio</x-boson::label>
    <x-boson::textarea id="bio" name="bio" rows="3" />
    <x-boson::description>Write a short description about yourself. Markdown is supported.</x-boson::description>
</x-boson::field>

With select

<x-boson::field>
    <x-boson::label for="timezone">Timezone</x-boson::label>
    <x-boson::select id="timezone" name="timezone">
        <option value="">Select a timezone</option>
        <option value="utc">UTC</option>
        <option value="est">Eastern Time</option>
        <option value="pst">Pacific Time</option>
    </x-boson::select>
    <x-boson::description>Used for scheduling and displaying dates.</x-boson::description>
</x-boson::field>

Multiple fields in a form

<x-boson::field>
    <x-boson::label for="email">Email</x-boson::label>
    <x-boson::input id="email" name="email" type="email" />
    <x-boson::description>We'll never share your email with anyone.</x-boson::description>
</x-boson::field>

<x-boson::field>
    <x-boson::label for="display-name">Display name</x-boson::label>
    <x-boson::input id="display-name" name="display_name" />
    <x-boson::description>This is how your name will appear publicly.</x-boson::description>
</x-boson::field>