폼 필드
안정composite라벨·입력칸·도움말을 한 묶음으로 감싼 입력 한 줄입니다.
@tissue-ui/layout-react설치
bash
npm install @tissue-ui/layout-reacttsx
import { FormField } from "@tissue-ui/layout-react";언제 쓰나
- 입력칸에 라벨·도움말·오류 메시지를 하나로 묶을 때.
예제
필수 · 오류
다양한 입력 감싸기
입력칸 자리에 셀렉트·텍스트영역 등 어떤 입력이든 넣을 수 있습니다.
도움말만
필수·오류 없이 도움말만 붙일 수도 있습니다.
스키마 검증 (Zod + useForm)
useForm 훅에 Zod 스키마를 걸면 값·에러·제출을 알아서 관리합니다. field()·input() 스프레더가 FormField 와 입력칸의 오류·aria 배선을 자동으로 채워, 잘못된 값이면 제출이 막히고 도움말 아래에 오류가 함께 표시됩니다.
속성
| 속성 | 타입 | 설명 |
|---|---|---|
| label | string | 항목 이름입니다. |
| hint | string | 입력칸 아래 도움말입니다. |
| required | boolean | 이름 뒤에 필수 표시(*)를 붙입니다. |
| error | string | 오류 메시지를 보여주고 입력칸을 빨갛게 표시합니다. |
| children | node | 안에 넣을 입력칸입니다 (텍스트 입력·셀렉트 등). |
위 옵션 말고도 className·onClick 같은 일반 HTML 속성을 그대로 넘길 수 있습니다.
상태
defaulterror
data 속성
data-requireddata-error
이 페이지의 옵션·상태는 실제 코드 정의에서 그대로 가져온 것입니다. 에이전트는 같은 내용을 llms.txt 로 읽습니다.