はじめに

新規登録画面でパスワードのinputの左に目のアイコンがあり

ボタンを押したらパスワードが黒丸になって見えなくなったり、文字として見えるようになるという

よくあるUIの作り方です。

実例ではshadcn/uiを使っていますが、生のhtmlでもcssいじれば似たようになると思います。

v0とかに投げれば1発だと思います。

ただ1回作って仕組みを知ることも大事だと思うので。

巷で言われているAI駆動開発は"元々すでにできる人間が使うべし"だと思っている人間です。

どういうものか

結論

  const [isVisible, setIsVisible] = useState(true);

<div className="relative">
  <Input
    id="password"
    value="@peduart"
    className=""
    type={isVisible ? "text" : "password"}
  />
  <Button
    size="icon"
    variant="ghost"
    className="absolute right-1 top-1/2 -translate-y-1/2 rounded-full"
    onClick={() => setIsVisible(!isVisible)}
  >
    {isVisible ? (
      <Eye className="w-5 h-5" />
    ) : (
      <EyeOff className="w-5 h-5" />
    )}
  </Button>
</div>