Password Input

#Basic usage

password-input/basic Vue React

Password

password-input/basic.vue

<script setup lang="ts">
import { eye, eye_off } from "@bysages/icons";
import { Icon, PasswordInput } from "@bysages/vue";
</script>

<template>
  <PasswordInput.Root>
    <PasswordInput.Label>Password</PasswordInput.Label>
    <PasswordInput.Control>
      <PasswordInput.Input placeholder="••••••••" />
      <PasswordInput.VisibilityTrigger>
        <PasswordInput.Indicator>
          <Icon :glyph="eye" />
          <template #fallback>
            <Icon :glyph="eye_off" />
          </template>
        </PasswordInput.Indicator>
      </PasswordInput.VisibilityTrigger>
    </PasswordInput.Control>
  </PasswordInput.Root>
</template>

#Props

#Control

A styled part — no props of its own; it takes the anatomy's shared styling.

#Indicator

Prop	Type	Default	Description
`fallback`	`string`		The fallback content to display when the password is not visible.

#Input

A styled part — no props of its own; it takes the anatomy's shared styling.

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder for the field and its eye.
`autoComplete`	`passwordInput.Props['autoComplete']`		The autocomplete attribute for the input
`defaultVisible`	`boolean`		Whether the password is visible by default
`disabled`	`boolean`		Whether the input is disabled
`id`	`string`		The unique identifier of the machine.
`ids`	`passwordInput.Props['ids']`		The ids of the elements in the password input. Useful for composition.
`ignorePasswordManagers`	`boolean`		Whether to ignore password managers
`invalid`	`boolean`		Whether the input is in an invalid state
`name`	`string`		The name attribute for the input
`readOnly`	`boolean`		Whether the input is read-only
`required`	`boolean`		Whether the input is required
`translations`	`passwordInput.IntlTranslations`		Specifies the localized strings that identifies the accessibility elements and their states
`visible`	`boolean`		Whether the password is visible

#VisibilityTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.