Password Input
fandhe-frontend-pre-styled-ui の password_input mod が提供するスタイル済み Password Input 部品です。
関連 API: fandhe-frontend-pre-styled-ui API / fandhe-frontend-headless-ui API
Demo
data-state="visible"/"hidden" で type="password"/"text" が切り替わるパスワード入力。visibility-trigger は aria-pressed/aria-controls で意味論を担い、パスワード値そのものは一切保持しません。
Features
size/colorPalettevariant クラスを付与し、headless-ui のpassword_input::rootへ委譲する。visibleフラグで表示/非表示を制御し、PasswordInputPropsでautocomplete（PasswordAutocomplete）等を渡す。
Anatomy
root
label
control
input
visibility-triggerAPI Reference
Arguments
| 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 を含む）。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|---|---|
control | data-disabled | （値なし） |
control | data-invalid | （値なし） |
control | data-state | hidden, visible |
input | data-disabled | （値なし） |
input | data-invalid | （値なし） |
input | data-state | hidden, visible |
label | data-disabled | （値なし） |
label | data-invalid | （値なし） |
root | data-disabled | （値なし） |
root | data-invalid | （値なし） |
root | data-state | hidden, visible |
visibility-trigger | data-disabled | （値なし） |
visibility-trigger | data-state | hidden, visible |
CSS Variables
| Variable | Default |
|---|---|
--fandhe-password-input-font-size | var(--fandhe-size-control-font-size-md, var(--fandhe-font-font-size-md)) |
--fandhe-password-input-height | var(--fandhe-size-control-height-md, 2.5rem) |
--fandhe-password-input-padding-x | var(--fandhe-size-control-padding-x-md, 1rem) |
Accessibility
WAI-ARIA
| Attribute | Description |
|---|---|
| aria-invalid | props.invalid が true のとき input パーツへ "true" を付与する。 |