Password Input

Demo

Features

• Root / Label / Control / Input / VisibilityTrigger / Indicator の 6 anatomy パーツを提供する。表示切替（visible）状態機械のみを持ち、パスワード値そのものは一切保持しない（input は value 引数自体を持たない）。
• input は visible の bool から type="password"/type="text" を決定的に導出する（呼び出し側文字列を type スロットへ通す経路がない）。data-state（root/control と同じ visible/hidden 語彙）・autocapitalize="off"・spellcheck="false" も固定付与する（ark-ui/zag 準拠、イシュー #1614）。
• readonly（PasswordInputProps）で input にネイティブ readonly を、6 パーツ全てに data-readonly を付与する。visibility_trigger へはネイティブ disabled を合成しない（表示切替は値を変更しない操作のため、readonly でもキーボード操作での表示確認を封じない）。
• パーツ別 data-* 分布は ark-ui/zag に合わせる: root/control/indicator は disabled/invalid/readonly、label は disabled/invalid/readonly/required、input は disabled/invalid/readonly/required（required は当方の superset。root/control の data-state も同様に superset として維持し、後方互換を壊さない）。
• visibility_trigger は button type="button" + aria-pressed（トグルボタンパターン）+ aria-controls で意味論を担う。aria-label は呼び出し側が付与する（国際化はアプリ側の責務）。zag は aria-expanded/tabIndex: -1 を採用するが、本コンポーネントは意図的に追随しない（aria-pressed は input が展開/折り畳み対象領域でないため、tab 順序は Radix の「キーボード操作時はトリガーへフォーカス維持」と整合させ tabindex を付与しない。詳細はモジュール doc「参考サイトとの意図的な差分」節参照）。
• PasswordInputProps から input の id（"{id}-input"）を決定的に導出し、label/visibility_trigger へも同じ値を一貫伝播する。name 属性が必要な場合は input の attrs へ呼び出し側が付与する（reserved キーではない）。
• Default は Hidden（パスワードを隠す方が安全側の既定）。hydration 属性 data-hydrate-visible は fail-closed（未知値を HydrateError で拒否）。
• ark-ui/zag の ignorePasswordManagers 相当（data-1p-ignore 等のパスワードマネージャ連携抑止属性）は本コンポーネントでは提供しない（機能プロップでありデータ属性の状態語彙ではないため、イシュー #1614 でも見送り）。

API Reference

Arguments

Data Attributes

Examples

Invalid + new-password

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

Read-only

readonly: true の状態。input にネイティブ readonly が、6 パーツ全てに data-readonly が付く。表示切替トリガーはキーボード操作のまま無効化されない。

Custom CSS

headless-ui はスタイルレスであるため、[data-scope]/[data-part]/[data-state]/data-* 状態属性セレクタを利用者が自前 CSS で装飾する最小例です。

[data-scope="password-input"][data-part="control"] {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ccc;
}

[data-scope="password-input"][data-part="visibility-trigger"][data-state="visible"] {
  color: #0a7;
}

[data-scope="password-input"][data-part="input"][data-invalid] {
  border-color: #d33;
}

[data-scope="password-input"][data-part="root"][data-disabled],
[data-scope="password-input"] [data-readonly] {
  opacity: 0.6;
}

Accessibility

Keyboard Interactions

WAI-ARIA