IPasswordInput ​

A masked field with a show/hide toggle and an optional strength meter. It composes IInput, so sizes, states and form wiring behave the same way.

<IPasswordInput v-model="password" placeholder="Your password" />

The toggle is a button in the trailing slot, reachable by keyboard, and it announces its state.

Strength meter ​

strength adds a four-segment meter under the field. Type into it to see it move.

<IPasswordInput v-model="password" strength />

The meter scores what has been typed and nothing else. Enforce your actual policy in the validator on your IForm, where it can refuse the submit:

const schema = z.object({
  password: z.string()
    .min(12, 'Use at least 12 characters.')
    .refine(notBreached, 'That password has appeared in a data breach.'),
})

strengthLabels renames the four steps, weakest first.

Custom strength labels ​

<IPasswordInput
  v-model="password"
  strength
  :strength-labels="['Too short', 'Getting there', 'Decent', 'Excellent']"
/>

Without the toggle ​

<IPasswordInput v-model="password" :toggle="false" placeholder="No reveal" />

The toggle only ever reveals what is being typed now, so leaving it on is usually the friendlier choice.

Sizes ​

<IPasswordInput v-model="password" size="sm" placeholder="Small" />
<IPasswordInput v-model="password" size="md" placeholder="Medium" />
<IPasswordInput v-model="password" size="lg" placeholder="Large" />

In a form ​

Inside an IFormField the id, invalid state and aria-describedby are wired for you, exactly as for a plain input.

<IFormField name="password" label="Password" required>
  <IPasswordInput v-model="state.password" strength />
</IFormField>

Set autocomplete so password managers recognise the field: new-password on a sign-up, current-password on a sign-in. It falls through to the input.

Props ​