Password input

The password input masks its value as the user types. Create one with PasswordInput::make().

PHP

PasswordInput::make('password', 'Password')
  ->placeholder('Your password')

Preview

Tree

• ▾field.password-input
  • autoComplete:null
  • autoFocus:false
  • columnWidth:"md"
  • conditions:null
  • confirmation:null
  • dependsOnAny:false
  • dependsOnKeys:null
  • disabled:false
  • editablePrefill:false
  • helperText:null
  • label:"Password"
  • labelAction:null
  • name:"password"
  • passwordRules:null
  • placeholder:"Your password"
  • prefillRefreshOn:null
  • prefillResetOn:null
  • prefix:null
  • readOnly:false
  • required:false
  • suffix:null
  • tabIndex:null
  • tooltip:null
  • value:null

Style

Confirmation

->needsConfirmation() adds a second field the user must re-type to confirm. It is named <name>_confirmation, which matches Laravel’s confirmed rule, so pair the two:

PHP

PasswordInput::make('password', 'Password')
  ->needsConfirmation()
  ->rules(['required', 'min:8', 'confirmed'])

Preview

Tree

• ▾field.password-input
  • autoComplete:null
  • autoFocus:false
  • columnWidth:"md"
  • conditions:null
  • confirmation:{"label":"Confirm password","name":"password_confirmation","placeholder":"Confirm password"}
  • dependsOnAny:false
  • dependsOnKeys:null
  • disabled:false
  • editablePrefill:false
  • helperText:null
  • label:"Password"
  • labelAction:null
  • name:"password"
  • passwordRules:null
  • placeholder:null
  • prefillRefreshOn:null
  • prefillResetOn:null
  • prefix:null
  • readOnly:false
  • required:false
  • suffix:null
  • tabIndex:null
  • tooltip:null
  • value:null

Style

Pass a custom label and placeholder to override the defaults:

PasswordInput::make('password', 'Password')
    ->needsConfirmation('Repeat password', 'Type it again');

Label action

->labelAction() renders a component next to the label, such as a “Forgot password?” link on a sign-in form. It is available on every field.

use Lattice\Ui\Components\Link;

PasswordInput::make('password', 'Password')
    ->labelAction(Link::make('Forgot password?')->href(route('password.request')));

Autocomplete

->autoComplete() sets the HTML autocomplete attribute so password managers behave correctly. Use current-password on sign-in and new-password on registration or password-change forms.

PasswordInput::make('password', 'Password')->autoComplete('new-password');

Affixes

->prefix() and ->suffix() add an icon or text adornment to the input — the affix sits outside the show/hide toggle. See affixes on Text input for the full rules.

PasswordInput::make('token', 'API token')->prefix(Affix::icon('key'));

Common options

PasswordInput shares label, default value, required, disabled, read-only, and visibility options with every field — see Fields. For validation and conditional behavior, see Validation and Conditional fields.