Search

검색 버튼이 붙은 Textfield 다.

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

기본

검색

기본

검색

isClearable값이 있을 때만 버튼이 나온다

<Search value={v} onChange={onChange} onSearch={onSearch} isClearable onClear={clear} />

버튼 동작

onSearch 를 주면 버튼이 type="button" 으로, 주지 않으면 type="submit" 으로 동작한다. 폼 안에서 엔터 제출을 그대로 쓰려면 onSearch 를 주지 않는다.

searchButtonTitle 로 버튼의 접근 이름을 바꾼다.

상태

검색

기본

검색

검색어를 입력해주세요

isError테두리·글자·메시지

검색

disabled조건이 맞으면 다시 쓸 수 있다

검색

readOnly값은 보여주되 바꿀 수 없다

isError · disabled · readOnly

react-hook-form

RHFSearch 는 /rhf 서브패스에 있다. 값과 에러는 RHF 가 소유하고, 검색 버튼은 onSearch 가 없으면 type="submit" 이라 폼 제출로 이어진다. 그래서 검증에 걸리면 검색이 실행되지 않는다.

<RHFSearch control={control} name="keyword" rules={{ minLength: { value: 2, message: "…" } }} isClearable />

검색 버튼이 submit — 검증을 통과해야 handleSubmit 이 불린다

onSearch 를 주면 버튼이 type="button" 이 되어 폼 제출 없이 그 콜백만 부른다. 이때는 검증과 무관하게 실행되므로 값은 getValues() 로 읽는다.

API

이름	타입	기본값	설명
`className`	string \| undefined	—	—
`clearButtonTitle`	string	—	지우기 버튼의 접근 이름. 소비자의 어휘·언어로 바꿀 수 있어야 한다 (a11y.md §9)
`disabled`	boolean	`false`	—
`errorMessage`	string	—	—
`id`	string	—	—
`infoMessage`	string	—	—
`isClearable`	boolean	—	—
`isTextInputBlocked`	boolean	—	—
`onClear`	() => void	—	—
`onSearch`	() => void	—	검색 버튼 클릭 핸들러. 주지 않으면 버튼이 submit 으로 동작한다
`placeholder`	string	—	—
`readOnly`	boolean	—	—
`searchButtonTitle`	string	`"검색"`	검색 버튼의 접근 이름
`searchButtonType`	ButtonHTMLAttributes<HTMLButtonElement>["type"]	—	—
`unit`	string	—	—
`value`	string \| number	—	입력값. 네이티브 타입(`string \| number \| readonly string[]`)에서 배열을 뺐다 — React 가 `<select multiple>` 때문에 넣은 갈래라 한 줄 입력에는 쓸 일이 없고, 넘기면 `'' + value` 로 합쳐져 쉼표가 값에 섞인다. `number` 는 남긴다 — `type="number"` 를 지원하기 때문이다.

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