{"name":"password-input","title":"Password Input","description":"A password input field with a visibility toggle button and correct autocomplete handling.","installCommand":"bunx marko-ui add password-input -y","usageTags":"<PasswordInput>","importSnippet":"import PasswordInput from \"@/components/ui/password-input/password-input.marko\";","usageSnippet":"<PasswordInput label=\"Password\" name=\"password\"/>","tags":["PasswordInput"],"parts":[],"props":[{"name":"autoComplete","type":"'current-password' | 'new-password' | undefined","required":false,"default":"current-password","description":"The autocomplete attribute for the password input."},{"name":"defaultVisible","type":"boolean | undefined","required":false,"description":"The default visibility of the password input."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"disabled","type":"boolean | undefined","required":false,"description":"Whether the password input is disabled."},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the password input parts"},{"name":"ignorePasswordManagers","type":"boolean | undefined","required":false,"description":"When `true`, the input will ignore password managers.\n\n**Only works for the following password managers**\n- 1Password, LastPass, Bitwarden, Dashlane, Proton Pass"},{"name":"invalid","type":"boolean | undefined","required":false,"description":"The invalid state of the password input."},{"name":"label","type":"string","required":false},{"name":"name","type":"string | undefined","required":false,"description":"The name of the password input."},{"name":"readOnly","type":"boolean | undefined","required":false,"description":"Whether the password input is read only."},{"name":"required","type":"boolean | undefined","required":false,"description":"Whether the password input is required."},{"name":"translations","type":"IntlTranslations | undefined","required":false,"description":"The localized messages to use."},{"name":"visible","type":"boolean | undefined","required":false,"description":"Whether the password input is visible."}],"events":[{"name":"onVisibilityChange","arg":"VisibilityChangeDetails","description":"Function called when the visibility changes."},{"name":"visibleChange","arg":"boolean"}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"password-input-demo","title":"Basic","source":"import PasswordInput from \"@marko-ui/shadcn/ui/password-input/password-input.marko\";\n\n<PasswordInput label=\"Password\" placeholder=\"Enter your password\" class=\"w-[320px]\"/>","description":"A labeled password input with a visibility toggle button."},{"id":"password-input-new-password","title":"New password","source":"import PasswordInput from \"@marko-ui/shadcn/ui/password-input/password-input.marko\";\n\n<PasswordInput\n  label=\"New password\"\n  placeholder=\"Create a password\"\n  name=\"new-password\"\n  autoComplete=\"new-password\"\n  class=\"w-[320px]\"\n/>","description":"Pass `autoComplete=\"new-password\"` so browsers offer a generated password instead of an existing one."},{"id":"password-input-disabled","title":"Disabled","source":"import PasswordInput from \"@marko-ui/shadcn/ui/password-input/password-input.marko\";\n\n<PasswordInput label=\"Password\" value=\"hunter2\" disabled class=\"w-[320px]\"/>","description":"A disabled password input ignores pointer input and is skipped by the tab order."},{"id":"password-input-invalid","title":"Invalid","source":"import PasswordInput from \"@marko-ui/shadcn/ui/password-input/password-input.marko\";\n\n<PasswordInput label=\"Password\" value=\"short\" invalid class=\"w-[320px]\"/>","description":"Pass `invalid` to mark the field as failing validation.","essential":true},{"id":"password-input-controlled","title":"Controlled","source":"import PasswordInput from \"@marko-ui/shadcn/ui/password-input/password-input.marko\";\n\n<let/visible=false/>\n\n<div class=\"flex flex-col gap-2\">\n  <span class=\"text-sm text-muted-foreground\">visible: ${String(visible)}</span>\n  <PasswordInput\n    label=\"Password\"\n    placeholder=\"Enter your password\"\n    visible=visible\n    visibleChange=(next) => { visible = next; }\n    class=\"w-[320px]\"\n  />\n</div>","description":"Zag machines are controlled: a `visible` prop without a change handler never moves. Pair it with `visibleChange`, or use Marko's bind shorthand `visible:=state`."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"input"}