Skip to content
fandhe-frontend
GitHub

Password Input

fandhe-frontend-headless-ui の password_input mod が提供する表示切替トリガー付きパスワード入力の unstyled 部品です。Root / Label / Control / Input / VisibilityTrigger / Indicator の 6 anatomy パーツで構成され、表示切替（visible）状態機械のみを持ちます。パスワード値そのものは一切保持・出力しません（input は value 引数自体を持たない設計です）。

/themes/ 側の PasswordInput（Chakra ライクな variant/size を持つスタイル層）と異なり、CSS を一切持ちません。

スタイル済みの表示例は Password Input を参照してください。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Features

  • Root / Label / Control / Input / VisibilityTrigger / Indicator の 6 anatomy パーツを提供する。表示切替（`visible`）状態機械のみを持ち、パスワード値そのものは一切保持しない（`input` は `value` 引数自体を持たない）。
  • `input` は `visible` の bool から `type="password"`/`type="text"` を決定的に導出する（呼び出し側文字列を type スロットへ通す経路がない）。
  • `visibility_trigger` は `button type="button"` + `aria-pressed`（トグルボタンパターン）+ `aria-controls` で意味論を担う。`aria-label` は呼び出し側が付与する（国際化はアプリ側の責務）。
  • `PasswordInputProps` から `input` の id（`"{id}-input"`）を決定的に導出し、`label`/`visibility_trigger` へも同じ値を一貫伝播する。
  • `Default` は Hidden（パスワードを隠す方が安全側の既定）。hydration 属性 `data-hydrate-visible` は fail-closed（未知値を `HydrateError` で拒否）。

Anatomy

root
  label
  control
    input
    visibility-trigger
      indicator

API Reference

Arguments

NameTypeDefaultDescription
root/control/input/visibility_trigger(visible)bool表示中かどうか（`data-state`/`type`/`aria-pressed` を決める）。
PasswordInputProps.id&strベース id。`input` の id（`"{id}-input"`）の導出元。
PasswordInputProps.disabledbool`input`/`visibility_trigger` にネイティブ `disabled` + `data-disabled` を付与する。
PasswordInputProps.invalidbool`root`/`control`/`input` に `data-invalid` を、`input` に `aria-invalid="true"` を付与する。
PasswordInputProps.requiredbool`input` にネイティブ `required` + `data-required` を付与する。
PasswordInputProps.autocompletePasswordAutocomplete`CurrentPassword`（`autocomplete="current-password"`）または `NewPassword`（`"new-password"`）。
indicator(visible)bool装飾専用パーツの状態反映（`aria-hidden="true"` 固定、意味論は `visibility_trigger` が担う）。

Data Attributes

PartAttributeObserved Values
controldata-statehidden
indicatordata-statehidden
inputdata-required
rootdata-statehidden
visibility-triggerdata-statehidden

Examples

Invalid + new-password

登録フォーム向けに `autocomplete="new-password"` を指定し、`invalid` を立てた状態。`aria-invalid="true"` が `input` に付与される。

Accessibility

WAI-ARIA

AttributeDescription
aria-pressed (visibility_trigger)トグルボタンパターン。表示中（`visible == true`）で `"true"`。
aria-controls (visibility_trigger)`input` の id を指す。
aria-invalid (input)`invalid` が `true` のときのみ `"true"` を出力する。
aria-hidden (indicator)常に `"true"`（装飾専用、意味論は `visibility_trigger` の `aria-pressed` が担うため重複読み上げを防ぐ）。