Code
<script lang="ts">
import { PasswordInput } from 'sv5ui-plus';
let pwd = $state('');
</script>
<PasswordInput bind:value={pwd} showStrength={true} />
PasswordInput
A secure password field with a built-in visibility toggle, optional strength meter, and full
support for sizes, colors, and variants. Extends Input — all Input props are forwarded.
Usage
Drop-in replacement for a password input — adds an eye toggle button. Use bind:value for two-way binding.
Strength Meter
Set showStrength to display a colour-coded 4-segment bar below the input. The built-in heuristic checks length, case,
digits, and symbols.
Segment Icon
Use segmentIcon to replace the default filled bars with any Iconify icon. The icons are coloured by strength level.
lucide:star
lucide:shield
lucide:lock
lucide:circle
Mask Character
Use maskChar to customize the masked bullet symbol while maintaining full native selection, focus caret alignment,
and accessibility.
Star (✦)
Heart (♥)
Asterisk (*)
Custom Strength
Provide a strengthFn returning 0–4 to override the built-in heuristic with your own logic. Use strengthLabels to customize the displayed text.
Size
Use size to control the field dimensions, text size, toggle icon size, and strength meter segment size.
xs
sm
md
lg
xl
Color
Use color to set the focus ring color of both the input and the toggle button.
primary
secondary
tertiary
success
warning
error
info
surface
Variant
Use variant to change the input's visual style. Mirrors the Input component's variants.
outline
soft
subtle
ghost
Highlight
Use highlight to permanently show the ring — useful for manual error states. Automatically enabled when inside
a FormField with an error.
error highlight
warning highlight
Disabled
Use disabled to prevent any interaction.
Real World Examples
Sign-up form with strength meter
Custom toggle icons
Error state
Password does not meet the requirements.