Password Input

fandhe-frontend-pre-styled-ui の password_input mod が提供するスタイル済み Password Input 部品です。

Demo

data-state="visible"/"hidden" で type="password"/"text" が切り替わるパスワード入力。visibility-trigger は aria-pressed/aria-controls で意味論を担い、パスワード値そのものは一切保持しません。

Hidden

Visible

Invalid

Disabled

`size`/`colorPalette` variant クラスを付与し、headless-ui の `password_input::root` へ委譲する。
`visible` フラグで表示/非表示を制御し、`PasswordInputProps` で `autocomplete`（`PasswordAutocomplete`）等を渡す。

root
  label
  control
    input
    visibility-trigger

Name	Type	Default	Description
size	Size	Size::Md	サイズ variant。
palette	ColorPalette	ColorPalette::Accent	colorPalette 軸。
visible	bool	false	パスワード文字列の表示/非表示。
props	&PasswordInputProps<'_>		`id`・`disabled`・`invalid`・`required`・`autocomplete` を束ねる構造体。
attrs	Vec<(&str, &str)>		root パーツへ合成する追加属性。
children	Vec<Node>		root 配下の子ノード（通常 input/visibility_trigger を含む）。

Variable	Default
--fandhe-password-input-font-size	var(--fandhe-font-font-size-md)
--fandhe-password-input-height	2.5rem
--fandhe-password-input-padding-x	0.75rem

Attribute	Description
aria-invalid	`props.invalid` が `true` のとき `input` パーツへ `"true"` を付与する。