パスワード入力PasswordInputExperimental

パスワードの表示・非表示を切り替えられる入力欄です。

プレビュー

状態とバリエーション

非表示

初期状態では値を伏せて表示します。

右端のボタンで入力内容の表示・非表示を切り替えます。

表示中

必要に応じて、外部の状態から表示・非表示を制御できます。

右端のボタンで入力内容の表示・非表示を切り替えます。

無効化

変更できない理由はツールチップと補足文で伝えます。

右端のボタンで入力内容の表示・非表示を切り替えます。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
showboolean-表示・非表示の状態を外部から制御する場合に使います。
onShowChange(show: boolean) => void-表示切替ボタンが押された時に呼ばれます。
showLabelstring'Show password'パスワードを表示するボタンの支援技術向けラベルです。
hideLabelstring'Hide password'パスワードを隠すボタンの支援技術向けラベルです。
...restInputHTMLAttributes-`type` 以外の、入力欄に渡せる標準属性を指定できます。

使い方

import { FormControl, FormGroup, FormLabel, PasswordInput } from "@gunjo/ui";

export function PasswordField() {
  return (
    <FormGroup className="w-full max-w-sm">
      <FormLabel htmlFor="password">パスワード</FormLabel>
      <FormControl>
        <PasswordInput
          id="password"
          placeholder="パスワードを入力"
          showLabel="パスワードを表示"
          hideLabel="パスワードを隠す"
        />
      </FormControl>
    </FormGroup>
  );
}

使用コンポーネント

PasswordInputInputButtonTooltip

関連コンポーネント

InputFormTooltipButton