Field

라벨과 설명, 메시지를 컨트롤에 묶는다. id 연결과 aria 속성을 대신 처리한다.

import { Field, FieldLabel, FieldDescription, FieldGrid, FieldItem } from "@nui-kit/react";
// 서브패스로 좁힐 때
import { Field } from "@nui-kit/react/field";
import "@nui-kit/react/styles/field.css";   // 온디맨드일 때

이 페이지는 Server Component 라 dot notation 대신 FieldLabel 같은 named export 를 쓴다. Client Component 에서는 Field.Label 이 그대로 동작한다.

기본

라벨을 누르면 컨트롤에 포커스가 간다. id 는 Field 가 만들어 라벨과 컨트롤에 같이 넣는다.

이름

기본

이메일

회사 메일 주소를 입력해주세요.

FieldDescriptionaria-describedby 로 연결된다

<Field>
  <FieldLabel>이름</FieldLabel>
  <Textfield placeholder="홍길동" />
</Field>

에러

Field 에 errorMessage 를 주면 하위 컨트롤이 전부 에러 상태가 된다. 컨트롤마다 따로 줄 필요가 없다.

연락처

필수 입력 항목입니다.

errorMessage

연락처

하이픈 없이 입력합니다.

숫자만 입력해주세요.

설명과 함께둘 다 연결된다

<Field errorMessage="필수 입력 항목입니다.">…</Field>

색만이 아니라 아이콘과 텍스트로 함께 표현한다

방향과 정렬

direction 이 column 이면 라벨이 위, row 면 옆이다. align 은 row 일 때 세로 정렬을 정한다.

	`start`	`center`
`column`	수량 개	수량 개
`row`	수량 개	수량 개

<Field direction="row" align="center">…</Field>

direction × align

Field.Grid

여러 Field 를 열로 배치한다. columns 는 --nui-field-grid-columns CSS 변수로 전달된다.

시

구

columns={2}

모바일 1열 붕괴는 보류 상태다. 지금은 모든 뷰포트에서 지정한 열 수를 유지한다. 1열이 필요하면 columns=1 로 제어한다.

Field.Item

Field 안에서 하위 그룹을 만든다. 자체 id 범위와 에러 상태를 갖는다.

배송지

FieldItem 은 기본이 row 방향이다

커스터마이징

훅 그룹 field 이 없다.

API

Field

이름	타입	기본값	설명
`children` *	ReactNode	—	—
`align`	"start" \| "center"	`"center"`	—
`direction`	"row" \| "column"	`"row"`	—
`errorMessage`	string	`""`	—
`infoMessage`	string	`""`	—
`inputId`	string	—	—
`isError`	boolean	`false`	—

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

Field.Item

이름	타입	기본값	설명
`children` *	ReactNode	—	—
`align`	"start" \| "center"	`"center"`	—
`direction`	"row" \| "column"	`"row"`	—
`errorMessage`	string	`""`	—
`infoMessage`	string	`""`	—
`inputId`	string	—	—
`isError`	boolean	`false`	—

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

Field.Grid

이름	타입	기본값	설명
`children` *	ReactNode	—	—
`className`	string	—	—
`columns`	1 \| 2 \| 3 \| 4	`2`	—

FieldGridProps 에서 자동 생성됨 (components/Field/Field.tsx).

Field.Description

이름	타입	기본값	설명

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

Field.Message

이름	타입	기본값	설명
`className`	string	—	—
`errorMessage`	string	`""`	—
`id`	string	—	—
`infoMessage`	string	`""`	—

FieldMessageProps 에서 자동 생성됨 (components/Field/Field.tsx).