PasswordInput

Password field with a show/hide toggle. Supports a size prop: xs, sm, md (default), lg, xl.

Jump to API reference

Import

Vue
import { UiPasswordInput } from '@ziyarago/ui/vue'

Default

Vue
<UiPasswordInput
  label="Password"
  placeholder="Enter password"
  v-model="value"
 />

Filled with hint

Vue
<UiPasswordInput
  label="New password"
  hint="Minimum 8 characters"
  v-model="value"
 />

Error

Vue
<UiPasswordInput label="Password" error="Incorrect password" v-model="value" />

Sizes

Vue
<UiPasswordInput size="xs" label="Password" v-model="value" />

<UiPasswordInput size="sm" label="Password" v-model="value" />

<UiPasswordInput size="md" label="Password" v-model="value" />

<UiPasswordInput size="lg" label="Password" v-model="value" />

<UiPasswordInput size="xl" label="Password" v-model="value" />

API reference

Password field with a show/hide toggle. Use for sign-in and password change forms.

Props

PropType and valuesDefaultDescription
modelValuev-modelstring''Current password.
labelstring—Label shown above the control.
placeholderstring—Placeholder text.
hintstring—Helper text under the control. Hidden while error is set.
errorstring—Error message under the control. Turns the control red and is announced with role="alert".
autocompletestring'current-password'Native autocomplete token. Use "new-password" on sign-up and password-change forms so managers offer to generate one.
sizexssmmdlgxl'md'Control height, font and padding scale.

Events

Vue: @name. React: onName.

changeCalled with the new string on every keystroke.

Notes

  • autocomplete defaults to "current-password"; pass "new-password" for sign-up forms.