Skip to main content
The Password component renders a password input field with Bootstrap styling and validation error handling. Password fields are never pre-filled with values for security.

​
Basic Usage

<x-forms::password name="password" label="Password" />

​
Attributes

​
name
string
required
The input name attribute. Used for form submission and error handling.
​
label
string
default:""
The label text displayed for the input. If empty, a label will be auto-generated from the name.
​
model
mixed
default:"null"
The model instance to bind to. Note: Password fields never display values for security reasons.
​
default
mixed
default:"null"
The default value. Note: Password fields never display values for security reasons.
​
showErrors
boolean
default:"true"
Whether to display validation errors below the input.
​
showLabel
boolean
default:"true"
Whether to display the label. Set to false to hide the label.
​
placeholder
string
default:""
Custom placeholder text for the input.
​
showPlaceholder
boolean
default:"false"
Automatically use the label as placeholder text when true.
​
required
boolean
default:"false"
Mark the input as required. Adds HTML5 required attribute and displays a required indicator on the label.
​
inline
boolean
default:"false"
Display the label and input inline (horizontal layout).
​
floating
boolean
default:"false"
Enable Bootstrap floating label style.
​
inlineLabelClass
string
default:""
Additional CSS classes for the inline label wrapper.
​
inlineInputClass
string
default:""
Additional CSS classes for the inline input wrapper.
​
showJsErrors
boolean
default:"false"
Enable JavaScript-based error display for client-side validation.
​
framework
string
default:""
Specify a custom framework theme. Defaults to the configured framework.

​
Examples

​
Basic Password Input

<x-forms::password 
    name="password" 
    label="Password" 
/>

​
Required Password Field

<x-forms::password 
    name="password" 
    label="Password"
    :required="true"
/>

​
Password Confirmation

<x-forms::password 
    name="password" 
    label="Password"
    :required="true"
/>

<x-forms::password 
    name="password_confirmation" 
    label="Confirm Password"
    :required="true"
/>

​
With Placeholder

<x-forms::password 
    name="password" 
    label="Password"
    placeholder="Enter your password"
/>

​
Floating Label

<x-forms::password 
    name="password" 
    label="Password"
    :floating="true"
/>

​
Inline Layout

<x-forms::password 
    name="password" 
    label="Password"
    :inline="true"
    inline-label-class="col-md-3"
    inline-input-class="col-md-9"
/>

​
Without Label

<x-forms::password 
    name="password" 
    :show-label="false"
    placeholder="Password"
/>

​
With Additional Attributes

<x-forms::password 
    name="password" 
    label="Password"
    class="custom-password-input"
    minlength="8"
    autocomplete="new-password"
/>

​
With Help Text

<x-forms::password name="password" label="Password">
    <x-slot:help>
        Password must be at least 8 characters long and contain letters, numbers, and special characters.
    </x-slot:help>
</x-forms::password>

​
Complete Registration Form

<x-forms::form-open route="register">
    <x-forms::text 
        name="name" 
        label="Full Name"
        :required="true"
    />
    
    <x-forms::email 
        name="email" 
        label="Email Address"
        :required="true"
    />
    
    <x-forms::password 
        name="password" 
        label="Password"
        :required="true"
    />
    
    <x-forms::password 
        name="password_confirmation" 
        label="Confirm Password"
        :required="true"
    />
    
    <x-forms::submit>Register</x-forms::submit>
</x-forms::form-open>

​
Change Password Form

<x-forms::form-open route="password.update">
    <x-forms::password 
        name="current_password" 
        label="Current Password"
        :required="true"
        autocomplete="current-password"
    />
    
    <x-forms::password 
        name="new_password" 
        label="New Password"
        :required="true"
        autocomplete="new-password"
    />
    
    <x-forms::password 
        name="new_password_confirmation" 
        label="Confirm New Password"
        :required="true"
        autocomplete="new-password"
    />
    
    <x-forms::submit>Update Password</x-forms::submit>
</x-forms::form-open>

​
Security Considerations

The Password component includes important security features:
  • Never displays values: Unlike other input components, password fields never pre-fill with values from models or defaults
  • No old input: Password values are not preserved after validation errors
  • Autocomplete support: Use autocomplete="current-password" or autocomplete="new-password" attributes
  • Server-side validation: Always validate passwords on the server, not just client-side

​
Validation Error Display

When validation fails, the input automatically:
  • Adds the is-invalid Bootstrap class
  • Displays error messages below the input (if showErrors is true)
  • Does NOT preserve the entered password value

​
Implementation Details

The Password component:
  • Extends the base Input component with type set to password
  • Explicitly skips value assignment in the parent constructor for security
  • Supports all standard HTML input attributes via attribute merging
  • Integrates with Laravel’s validation error bag
Source: /src/Views/Components/Password.php:12

Build docs developers (and LLMs) love

Get started for freeTalk to us