TextField

visible label과 contextual feedback으로 한 줄 text value를 받는 native input control입니다.

예제

사용해야 할 때

이름, 검색어, 짧은 식별자처럼 한 줄 text value를 입력받고 visible label과 도움말 또는 오류가 필요할 때 사용합니다.

사용하지 말아야 할 때

읽기 전용 데이터 표시, 여러 줄 본문, 선택지 목록에는 사용하지 않습니다. 여러 줄에는 textarea, 선택에는 해당 native control을 사용합니다.

구조

visible label, native input, optional description, optional error 순서입니다. 모든 보조 text는 input ID에서 파생한 stable ID를 사용합니다.

크기와 변형

medium은 48px, large는 56px 높이입니다. 별도 visual variant는 없고 state가 border, text, surface를 결정합니다.

상태와 동작

우선순위는 Disabled > Error > Focus > Default입니다. errorMessage가 있으면 caller가 aria-invalid={false}를 주어도 error가 우선합니다.

반응형 동작

wrapper는 항상 available width를 채웁니다. 모바일의 native keyboard와 autofill은 input type, inputMode, autoComplete props를 통해 브라우저가 처리하며 별도 mobile component를 만들지 않습니다.

접근성

visible label은 항상 input과 연결됩니다. aria-describedby는 description, error, caller IDs 순서이며 duplicate를 제거합니다. error는 role="alert", aria-invalid="true", aria-errormessage를 만듭니다.

React 예제

import { TextField } from '@maxxuxx/react';
import '@maxxuxx/react/styles.css';

export function EmailField() {
  return (
    <TextField
      autoComplete="email"
      description="주문 알림을 받을 주소입니다."
      inputMode="email"
      label="이메일"
      type="email"
    />
  );
}

API

사용 토큰

• size/control/medium, size/control/large, radius/md
• color/bg/*, color/text/*, color/border/*, color/status/danger*, color/focus/ring

Figma

TextField component set은 Size 2 × State Default/Focus/Error/Disabled = 8 variants와 Label, Value, Description, Error TEXT properties를 제공합니다. 기본 너비는 320px이며 컨테이너에 맞춰 조절할 수 있습니다.

지원 상태