InputPassword

<script lang="ts">
  import { InputPassword } from 'sv5ui';

  let password = $state('');
</script>

<InputPassword bind:value={password} placeholder="Password" />

<!-- purpose picks the autocomplete value a password manager reads -->
<InputPassword purpose="login" placeholder="Password" />   <!-- current-password -->
<InputPassword purpose="signup" placeholder="Password" />  <!-- new-password -->
<InputPassword purpose="change" placeholder="Password" />  <!-- new-password -->

<!-- The toggle is on by default. Its accessible name is the next action, so it
     reads "Show password" while the value is hidden and "Hide password" once it
     is visible, with aria-pressed following the state. -->
<InputPassword placeholder="Default toggle" />

<!-- No toggle at all -->
<InputPassword toggle={false} placeholder="No toggle" />

<!-- Bindable, so the state can be shared or set from elsewhere -->
<InputPassword bind:visible placeholder="Controlled" />
<Button label={visible ? 'Hide' : 'Show'} onclick={() => (visible = !visible)} />

<!-- Your own icons and names -->
<InputPassword
  showIcon="lucide:lock"
  hideIcon="lucide:lock-open"
  showLabel="Reveal password"
  hideLabel="Conceal password"
/>

<!-- On by default: the warning appears after a key press while Caps Lock is on,
     and clears when Caps Lock is released or the field loses focus. It reads the
     modifier state from the key event, so it never guesses from the characters
     typed. -->
<InputPassword placeholder="Press Caps Lock, then type" />

<InputPassword capsLockMessage="Caps Lock is on, passwords are case sensitive" />

<InputPassword capsLockWarning={false} placeholder="No warning" />

<script lang="ts">
  import { InputPassword } from 'sv5ui';

  let password = $state('');

  // The component never scores a password for you. Scoring without a dictionary
  // is misleading, and a rule set that suits one policy penalises another, so
  // the number is yours: count rules, or hand the value to zxcvbn.
  const rules = [/.{8,}/, /\d/, /[a-z]/, /[A-Z]/];
  const met = $derived(rules.filter((rule) => rule.test(password)).length);

  // strength is an index into strengthLevels, so 4 rules met maps to the last
  // of the four default levels.
  const strength = $derived(password ? Math.max(0, met - 1) : null);
</script>

<!-- strength={null} hides the meter entirely, which is the default -->
<InputPassword bind:value={password} {strength} placeholder="Password" />

<!-- strengthLevels sets both the wording and the number of steps, and it is the
     Progress max, so five names means five segments. strength is clamped into
     the range, so a score of 9 lands on the last level rather than throwing. -->
<InputPassword
  bind:value={password}
  strength={score}
  strengthLevels={['Very weak', 'Weak', 'Fair', 'Strong', 'Excellent']}
/>

<!-- Two levels work too -->
<InputPassword bind:value={password} strength={score} strengthLevels={['Rejected', 'Accepted']} />

<!-- footer renders under the field, after the meter and the caps lock warning.
     It receives the current value and the clamped strength. -->
<InputPassword bind:value={password} {strength} footer={hints} />

{#snippet hints({ value, strength }: { value: string; strength: number | null })}
  <ul class="space-y-1">
    {#each rules as rule (rule.text)}
      {@const met = rule.regex.test(value)}
      <li class="flex items-center gap-1 {met ? 'text-success' : 'text-on-surface/50'}">
        <Icon name={met ? 'lucide:circle-check' : 'lucide:circle-x'} class="size-4 shrink-0" />
        <span class="text-xs">{rule.text}</span>
      </li>
    {/each}
  </ul>
{/snippet}

<!-- Everything Input takes, this takes: variants, colors, sizes, a leading icon,
     loading, disabled, highlight, and FormField wiring. -->
<InputPassword variant="soft" color="secondary" size="lg" leadingIcon="lucide:key-round" />
<InputPassword loading placeholder="Checking..." />
<InputPassword disabled value="cannot-edit" />

<FormField label="Password" name="password" hint="Required" error={passwordError}>
  <InputPassword purpose="login" />
</FormField>

<script lang="ts">
  import { Button, FormField, Input, InputPassword } from 'sv5ui';

  let email = $state('');
  let password = $state('');
</script>

<form class="space-y-4" onsubmit={(event) => { event.preventDefault(); signIn(email, password); }}>
  <FormField label="Email" name="email">
    <Input bind:value={email} type="email" autocomplete="email" leadingIcon="lucide:mail" />
  </FormField>

  <FormField label="Password" name="password">
    <InputPassword bind:value={password} purpose="login" leadingIcon="lucide:lock" />
  </FormField>

  <Button type="submit" label="Sign in" block />
</form>