본문으로 건너뛰기
Amineslab UI

Component

Field

레이블, 도움말, 오류 문구와 입력 요소를 접근성 관계로 연결합니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px
Controls

invalid를 켜면 오류 상태에서 설명 표시 여부를 확인할 수 있습니다.

입력 아래 도움말

보이는 레이블

오류 문구. invalid일 때만 보입니다

필수 표시와 aria-required

오류 상태와 ARIA 관계

control 비활성

Code
import { Field, Input } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<Field.Root disabled={false} invalid={false} required={true}>
      <Field.Label>{"프로젝트 이름"}</Field.Label>
      <Field.Control>
        <Input defaultValue="Amineslab UI"/>
      </Field.Control>
      {(<Field.Description showWhenInvalid={false}>
          {"팀에서 식별할 수 있는 이름입니다."}
        </Field.Description>)}
      {null}
    </Field.Root>))
}

Props

import {
  Field,
  FieldRoot,
  Label,
  FieldLabel,
  FieldDescription,
  FieldError,
  FieldControl,
  // ...
} from '@amineslab/ui'

Field

NameTypeDefaultDescription
Description.showWhenInvalidbooleanfalse오류 문구가 있으면 일반 도움말은 숨깁니다. 필수 입력 조건을 오류와 함께 보여주려면 true로 설정합니다.
Label.htmlFor / asChildstring / boolean-독립 Label은 native label 속성을 전달합니다. htmlFor로 컨트롤 id와 연결하고, asChild=true이면 자식에 합성합니다. Field 내부에서는 Field.Label을 사용하세요.
idstring-입력 요소 id의 기본값입니다. 생략하면 자동 생성됩니다.
controlIdstring-연결할 입력 요소의 id를 지정합니다.
invalidbooleanfalse오류 상태와 ARIA 관계를 활성화합니다.
requiredbooleanfalselabel과 입력 요소에 필수 상태를 전달합니다.
disabledbooleanfalse입력 요소를 비활성화합니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

Error state

Field.Error는 invalid일 때 control의 aria-describedby에 연결됩니다.

import { Field, Input } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<Field.Root invalid required>
          <Field.Label>이메일</Field.Label>
          <Field.Control>
            <Input defaultValue="hello@amineslab" type="email"/>
          </Field.Control>
          <Field.Error>올바른 이메일 형식이 아닙니다.</Field.Error>
        </Field.Root>))
}

With other controls

Field.Control 안에는 Input, Textarea, Select 어느 것이든 둘 수 있습니다.

초대 후에도 바꿀 수 있습니다.

import { Field, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<Field.Root>
          <Field.Label>역할</Field.Label>
          <Field.Control>
            <Select defaultValue="editor">
              <SelectTrigger aria-label="역할">
                <SelectValue placeholder="역할 선택"/>
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="viewer">뷰어</SelectItem>
                <SelectItem value="editor">편집자</SelectItem>
              </SelectContent>
            </Select>
          </Field.Control>
          <Field.Description>초대 후에도 바꿀 수 있습니다.</Field.Description>
        </Field.Root>))
}

사용 기준

권장하는 사용
  • 모든 입력 요소를 Field로 감싸 레이블과 오류 설명을 연결합니다.
피해야 할 사용
  • placeholder를 레이블 대신 사용하지 마세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

  • Tab: 내부 입력 요소로 포커스 이동