Field

Email

We'll never share your email

계약

Overview

Machine-readable contract from Component Spec.

component: fieldexport: Fieldversion: 1attributes: data-refineui=field

Anatomy

Part	data-refineui
root	field
error	field-error
hint	field-hint

Variants

Axis	Values
size	sm, md, lg

Accessibility

Slot	Element	Role
field-error	div	alert

Layout

Property	Value
direction	logical
rtl	true

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import { Field, FieldLabel, FieldHint, FieldError, FieldRequired, Input } from "@refineui/react";

<Field size="md">
  <FieldLabel>Email address</FieldLabel>
  <Input type="email" placeholder="you@example.com" />
  <FieldHint>We'll never share your email.</FieldHint>
</Field>

<Field size="lg">
  <FieldLabel>Password <FieldRequired /></FieldLabel>
  <Input type="password" error={hasError} />
  {hasError && <FieldError>Password is required</FieldError>}
</Field>

API 레퍼런스

Field

Prop	Default	Type	Description
size	"md"	"sm" | "md" | "lg"	필드 크기 티어(레이블과 메시지에 영향).

FieldLabel

필드의 레이블 요소. size prop을 받습니다(Field 컨텍스트에서 기본값).

FieldRequired

필수 표시 시각 인디케이터(별표).

FieldHint

입력 아래 도움말 텍스트.

FieldError

입력 아래 에러 메시지.