PasswordInput
パスワードの入力欄。入力した文字を表示して確認できる
type を入れ替えます
type は CSS では変えられません。このコンポーネントは状態を持つので、
サーバ側では描けません。
入れ替えるのは同じ要素の属性だけです。枠ごと差し替えると、 打っている最中にフォーカスが外れて、以降の文字が入らなくなります。 見た目には何も出ないので、打ち続けて初めて分かります。
テストが打ちながら切り替えて、続けて打った文字が入ることを測っています。
見た目は Input から借りています
線も箱も入力欄と同じものを使います。写しを作ると、片方だけ直したときにずれます。
ラベルが状態を伝えます
ボタンのラベルが「パスワードを表示」から「パスワードを隠す」に変わります。 目のアイコンだけでは、いまどちらなのかが読み上げに出ません。
ラベルは差し替えられます。
<PasswordInput showLabel="Show password" hideLabel="Hide password" />満たしている印と場所を分けます
Field は満たしているとき、印を欄の末尾に重ねます。切り替えのボタンも末尾にあります。 そのままだと重なるので、満たしているときだけボタンを内側へ寄せています。
寄せ幅は印の位置から決まります。当てずっぽうではありません—— 印は末尾から 12px の位置に 16px で置かれるので、末尾から 28px までを占めます。 24px では 4px 重なりました。
切り替えはフォームを送りません
ボタンの既定の type は submit です。そのままだと、見せようとした瞬間に送信されます。
押せないときは切り替えも押せません
中身が見えないのに切り替えだけ動くのは嘘です。
値は覚えません
このコンポーネントが覚えるのは「見せているかどうか」だけです。値は利用側が持ちます。
autoComplete は利用側が渡してください。ログインなら current-password、
登録なら new-password です。こちらで決めると、片方が必ず間違いになります。
3つの状態
通常・空・エッジケースの3つは、どのコンポーネントにも必ずあります。
通常default.tsx
通常。打った文字を確かめられる。
空empty.tsx
空。何も入っていないときも、切り替えのボタンは出したままにする。
8文字以上
エッジケースedge.tsx
エッジケース。誤り・満たしている・押せない。
8文字以上にしてください
props
Prop
Type
型と説明はコンポーネントのソースから抽出しています。既定値は出していません——cva の defaultVariants は 署名に現れないので、表に出すと「引数のデフォルトが書かれているものだけ」になり、嘘になります。