Password Toggle Field

Password Toggle Field

값의 표시 여부를 토글하는 통합 버튼이 있는 비밀번호 입력 필드 컴포넌트예요.

출처: 문서

본문

비밀번호 입력 옆에 표시/숨김을 토글하는 버튼이 붙어 있는 컴포넌트예요. 포인터로 토글하면 입력으로 포커스가 돌아가고, 키보드/가상 내비게이션으로 토글하면 버튼 포커스가 유지돼요. 폼 제출 후에는 우발적 저장을 막기 위해 표시 상태를 숨김으로 리셋해요. (불안정 API로 unstable_ 접두사 사용)

Features

  • 포인터로 토글 시 입력으로 포커스 반환.
  • 키보드/가상 내비게이션으로 토글 시 버튼 포커스 유지.
  • 폼 제출 후 우발적 저장 방지를 위해 표시 상태를 숨김으로 리셋.
  • 아이콘 기반 토글 버튼을 위한 암시적 접근 가능 라벨링.

Anatomy

모든 파트를 임포트해 조립해요.

import { unstable_PasswordToggleField as PasswordToggleField } from "radix-ui";

import { EyeClosedIcon, EyeOpenIcon } from "@radix-ui/react-icons";

export default () => (
  <PasswordToggleField.Root>
    <PasswordToggleField.Input />

    <PasswordToggleField.Toggle>
      <PasswordToggleField.Icon visible={<EyeOpenIcon />} hidden={<EyeClosedIcon />} />
    </PasswordToggleField.Toggle>
  </PasswordToggleField.Root>
);

API Reference

Root

비밀번호 토글 필드의 모든 파트를 담아요.

Prop Type Default
id string No default value
visible boolean No default value
defaultVisible boolean No default value
onVisiblityChange function No default value

Input

비밀번호 값을 담는 입력을 렌더링해요.

Prop Type Default
asChild boolean false
autoComplete enum "current-password"

Toggle

Prop Type Default
asChild boolean false

Slot

Prop Type Default
render function No default value
visible boolean No default value
hidden boolean No default value

Icon

Prop Type Default
asChild boolean false
visible* boolean No default value
hidden* boolean No default value

Examples

기본 사용법

<PasswordToggleField.Root>
  <PasswordToggleField.Input />

  <PasswordToggleField.Toggle>
    <PasswordToggleField.Icon visible={<EyeOpenIcon />} hidden={<EyeClosedIcon />} />
  </PasswordToggleField.Toggle>
</PasswordToggleField.Root>

Slot과 함께

<PasswordToggleField.Root>
  <PasswordToggleField.Input />

  <PasswordToggleField.Toggle>
    <PasswordToggleField.Slot visible="🙊" hidden="🙈" />
  </PasswordToggleField.Toggle>
</PasswordToggleField.Root>

Slot + render prop과 함께

<PasswordToggleField.Root>
  <PasswordToggleField.Input />

  <PasswordToggleField.Toggle>
    <PasswordToggleField.Slot
      render={({ visible }) => (
        <svg aria-hidden viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg">
          <path d={visible ? "M1 1 L2 2" : "M2 1 L1 2"} />
        </svg>
      )}
    />
  </PasswordToggleField.Toggle>
</PasswordToggleField.Root>

더 알아보기 (Learn more)

  • PasswordToggleField.Icon에 visible/hidden prop으로 표시·숨김 상태의 아이콘을 각각 전달해요.
  • Slot의 render prop으로 상태에 따라 동적으로 렌더링되는 커스텀 콘텐츠를 만들 수도 있어요.