Password

표시 토글이 붙은 Textfield 다.

import { Password } from "@nui-kit/react";
// 서브패스로 좁힐 때
import { Password } from "@nui-kit/react/textfield";
import "@nui-kit/react/styles/textfield.css";   // 온디맨드일 때

표시 상태

defaultIsPasswordVisible 을 주면 처음부터 값이 보인다.

기본숨김
defaultIsPasswordVisible
<Password placeholder="8자 이상" defaultIsPasswordVisible />

지우기

isClearable 과 onClear 를 함께 준다. 지우기 버튼은 표시 토글 왼쪽에 놓이고, Textfield · Textarea · Datepicker · Select 의 지우기와 같은 버튼이다.

isClearable — 값이 있을 때만 지우기가 나타나고, 지우면 숨김으로 돌아간다

값을 지우면 표시 상태가 숨김으로 되돌아간다. 지운 뒤 새로 입력할 때 비밀번호가 노출된 채로 남지 않게 한 동작이다.

showPasswordTitle 과 hidePasswordTitle 로 토글의 접근 이름을 바꾼다.

상태

기본
8자 이상 입력해주세요
isError테두리·글자·메시지
disabled조건이 맞으면 다시 쓸 수 있다
readOnly값은 보여주되 바꿀 수 없다

isError · disabled · readOnly

react-hook-form

RHFPassword 는 /rhf 서브패스에 있다. 표시/숨김 토글은 컴포넌트가 갖고, 값과 에러는 RHF 가 갖는다. 지우기 버튼을 누르면 값이 비고 표시 상태도 숨김으로 돌아간다.

8자 이상, 숫자를 하나 이상.

isValid: false
<RHFPassword control={control} name="password" rules={{ minLength: { value: 8, message: "…" } }} isClearable />

mode: "onChange" — 규칙에 걸리면 바로 에러가 보인다

에러 메시지는 fieldState.error.message 가 그대로 errorMessage 로 전달되어 컨트롤 아래에 표시되고 aria-describedby 로 연결된다.

API

이름타입기본값설명
classNamestring | undefined——
clearButtonTitlestring—지우기 버튼의 접근 이름. 소비자의 어휘·언어로 바꿀 수 있어야 한다 (a11y.md §9)
defaultIsPasswordVisiblebooleanfalse—
disabledbooleanfalse—
errorMessagestring——
hidePasswordTitlestring"비밀번호 숨기기"—
idstring——
infoMessagestring——
isClearableboolean——
isTextInputBlockedboolean——
onClear() => void——
placeholderstring——
readOnlyboolean——
showPasswordTitlestring"비밀번호 보기"—
unitstring——
valuestring | number—입력값. 네이티브 타입(`string | number | readonly string[]`)에서 **배열을 뺐다** — React 가 `<select multiple>` 때문에 넣은 갈래라 한 줄 입력에는 쓸 일이 없고, 넘기면 `'' + value` 로 합쳐져 쉼표가 값에 섞인다. `number` 는 남긴다 — `type="number"` 를 지원하기 때문이다.

PasswordProps 에서 자동 생성됨 (components/Textfield/Password.tsx). 표준 DOM 속성 298개는 그대로 전달되며 표에서 생략했다.