Input
먼저 보고, 그다음 계약을 읽습니다
테마 토큰 기반 텍스트 입력 필드 — 단일행 Input 과 다행 Textarea.
Component intent의도와 경계 읽기
네이티브 <input>/<textarea> 에 axe-input 스타일만 입힌 얇은 forwardRef 래퍼로, ref 와 native 속성(placeholder·type·disabled·aria-invalid 등)을 그대로 전파한다. Input 은 size 로 높이 프리셋(md 36px / lg 44px)을 고르고, Textarea 는 세로 리사이즈 가능하며 min-height 80px 다. FormField 로 감싸면 error 상태에서 aria-invalid 가 자동 연결돼 form.css 가 빨간 테두리로 시각 동기화한다.
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
import { Input } from "@axe/ui";export function Example() { return ( <> <Input type="email" placeholder="[email protected]" /> <Input size="lg" placeholder="큰 입력" /> </> );}import { Textarea } from "@axe/ui";<Textarea rows={4} placeholder="메모를 입력하세요" /><input class="axe-input" type="email" placeholder="[email protected]" /><input class="axe-input axe-input--lg" placeholder="큰 입력" /><textarea class="axe-input axe-input--textarea" placeholder="메모"></textarea>Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
size | "md" | "lg" | — | "md" | Input 높이 프리셋 (md=36px, lg=44px). Textarea 에는 없음. |
type | React.HTMLInputTypeAttribute | — | "text" | 네이티브 input type. 미지정 시 text 로 기본화 (Input 전용). |
...rest | Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> | — | — | Input — className 은 axe-input 과 병합되고 나머지는 <input> 으로 전파. |
...rest (Textarea) | React.TextareaHTMLAttributes<HTMLTextAreaElement> | — | — | Textarea 는 커스텀 prop 없음 — className 은 'axe-input axe-input--textarea' 와 병합, 나머지 textarea 속성 전파. |
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-input | stable | 입력 루트 (Input·Textarea 공통). height 36px, 토큰 테두리/배경, :focus 시 var(--ring). |
.axe-input--lg | stable | Input 큰 크기 변형 (height 44px, text-base) — size='lg' 일 때. |
.axe-input--textarea | stable | Textarea 변형 (height auto, min-height 80px, resize:vertical). |
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
- 네이티브 텍스트 편집/캐럿 이동
네이티브 <input>/<textarea> — 컴포넌트가 role/aria 를 덧붙이지 않음. aria-invalid="true" 를 주면 form.css 가 빨간 테두리로 시각 동기화.
라벨 연결은 별도 — <Label htmlFor> 또는 FormField 로 감싸 control id 를 매칭. 포커스 링은 :focus 에서 box-shadow var(--ring).