Field

라벨, 컨트롤, 메시지를 하나로 묶고 서로 연결해요. 컨트롤 하나에 Field 하나를 써요.

사용 예시

묶기

Field 안에 두면 라벨을 눌러도 Input에 포커스가 가요.

표시 이름

tsx

<Field>  <FieldLabel>표시 이름</FieldLabel>  <Input value={name} onChange={e => setName(e.target.value)} placeholder="다른 사람에게 보일 이름" /></Field>

틀린 값

FieldError를 보일 때는 invalid도 같은 조건으로 줘요. 메일 주소를 끝까지 입력하면 오류가 사라져요.

이메일

name@example.com 형식으로 입력하세요.

tsx

<Field invalid={!mailOk}>  <FieldLabel>이메일</FieldLabel>  <Input value={mail} onChange={e => setMail(e.target.value)} type="email" />  {mailOk    ? <FieldHelp>가입 확인 메일을 보내요.</FieldHelp>    : <FieldError>name@example.com 형식으로 입력하세요.</FieldError>}</Field>

이메일

name@example.com 형식으로 입력하세요.

권장

오류 문구 하나만 있어서 고칠 내용을 바로 알 수 있어요.

이메일

가입 확인 메일을 보내요.

name@example.com 형식으로 입력하세요.

지양

도움말과 오류 문구가 함께 보이면 고칠 내용을 알아보기 어려워요.

여러 오류

비밀번호처럼 조건이 여러 개인 값에서 맞지 않는 조건을 모두 보일 때 써요.

비밀번호

8자 이상이어야 해요.숫자가 1개 이상 있어야 해요.기호가 1개 이상 있어야 해요.

tsx

<Field invalid={pwErrors.length > 0}>  <FieldLabel>비밀번호</FieldLabel>  <Input value={pw} onChange={e => setPw(e.target.value)} type="password" />  {pwErrors.length    ? <FieldError items={pwErrors} />    : <FieldHelp>8자 이상, 숫자와 기호를 섞어서 입력하세요.</FieldHelp>}</Field>

확인 중과 성공

아이디 중복 확인처럼 결과를 기다려야 할 때 써요. 메시지가 여러 개 보이면 스크린 리더가 모두 읽어서 하나만 보이게 조건을 나눠요.

아이디

쓸 수 있는지 확인하고 있어요.

tsx

<Field invalid={taken}>  <FieldLabel>아이디</FieldLabel>  <Input value={userId} onChange={e => setUserId(e.target.value)} />  {taken    ? <FieldError>이미 쓰이는 아이디예요. 다른 아이디를 입력하세요.</FieldError>    : checking      ? <FieldPending>쓸 수 있는지 확인하고 있어요.</FieldPending>      : free        ? <FieldSuccess>쓸 수 있는 아이디예요.</FieldSuccess>        : <FieldHelp>3자에서 20자까지 쓸 수 있어요.</FieldHelp>}</Field>

한 줄 배치

약관 동의처럼 Checkbox와 라벨을 한 줄에 둘 때 써요.

약관 동의

동의해야 가입할 수 있어요.

tsx

<Field layout="inline" invalid={!agreed}>  <Checkbox checked={agreed} onCheckedChange={setAgreed} />  <FieldLabel>약관 동의</FieldLabel>  {!agreed && <FieldError>동의해야 가입할 수 있어요.</FieldError>}</Field>

설정 줄

설정 항목이 여러 개라서 컨트롤을 오른쪽 끝에 맞춰 정렬할 때 써요.

가입 소식 받기

한 달에 한 번 보내요.

tsx

<Field layout="split">  <FieldLabel>가입 소식 받기</FieldLabel>  <Switch checked={news} onCheckedChange={setNews} />  <FieldHelp>한 달에 한 번 보내요.</FieldHelp></Field>

이름

생년

권장

컨트롤마다 Field를 따로 써서 id가 겹치지 않아요.

이름과 생년

지양

Field 하나에는 id가 하나라서 두 Input의 id가 겹쳐요. 라벨을 누르면 첫 번째 Input에만 포커스가 가요.

컨트롤

표시 이름

이미 쓰이는 이름이에요. 다른 이름을 입력하세요.

layout

메시지

invalid

값"하늘색고래"

tsx

<Field layout="inline" invalid>  <FieldLabel>표시 이름</FieldLabel>  <Input value={name} onChange={e => setName(e.target.value)} className="w-40" />  <FieldError>이미 쓰이는 이름이에요. 다른 이름을 입력하세요.</FieldError></Field>

명세

이름
이름	값	기본
Field
invalid	boolean	false
컨트롤에 aria-invalid가 붙고 테두리가 danger 색으로 바뀌어요.
layout	stack, inline, split	stack
라벨과 컨트롤의 배치예요. 메시지는 항상 다음 줄에 보여요.
className	string	-
모든 하위 컴포넌트에 쓸 수 있어요.
FieldError
items	string, string[]	-
오류 문구예요. 배열이면 한 줄에 하나씩 보여요.