Input

핵심 속성

TRInput은 네이티브 <input>을 렌더링하며 속성, ref, 이벤트, 유효성과 폼 동작을 보존해요. TRField.Root으로 감싸고 TRField.Label을 함께 두세요. 필드가 레이블과 입력을 연결하므로 id나 htmlFor를 직접 쓰지 않아도 돼요. 안내는 TRField.Description, 검증 메시지는 TRField.Error로 작성하면 필드가 aria-describedby로 연결해요.

밀도가 높은 컨트롤에는 uiSize="md", 일반 폼에는 기본값인 md, 더 큰 조작 영역이 필요할 때는 lg를 쓰세요. disabled, readOnly, required는 네이티브 의미와 Tinyrack 상태 스타일을 유지해요. 필드 전체 상태는 TRField.Root의 disabled나 invalid로 지정하고, 감싸는 필드가 없을 때만 입력에 aria-invalid를 두세요.

텍스트 옆에 아이콘이나 버튼을 두려면 입력을 TRInput.Group으로 감싸세요. 테두리와 배경, 포커스 링은 그룹이 그리고 안쪽 입력은 테두리를 벗으므로, 여러 요소가 하나의 컨트롤로 읽혀요. 컨트롤 높이는 그룹이 정하니 크기는 입력이 아니라 그룹에 지정하세요. 정적인 내용에는 TRInput.Adornment를 쓰고(포인터 이벤트를 받지 않아 눌러도 입력에 포커스가 가요), 누를 수 있는 요소에는 TRInput.Action을 쓰세요. Action은 기본이 type="button"이라 감싸는 폼을 제출하지 않아요. 액션에는 반드시 접근 가능한 이름을 주고, 장식용 아이콘에는 aria-hidden을 붙여 필드 이름이 하나로 유지되게 하세요.

설치

pnpm add @tinyrack/ui

@import '@tinyrack/ui/components/input.css';

import { TRInput } from '@tinyrack/ui/components/input';
import { TRButton } from '@tinyrack/ui/components/button';

플레이그라운드

사용법

예시

API

TRInputProps는 Base UI Input 속성을 확장하고 기본값이 md인 uiSize?: 'md' | 'lg'를 추가해요. name, type, autoComplete, disabled, readOnly, required 같은 네이티브 입력 속성과 ref, className, style, 이벤트 핸들러를 전달해요.

제어된 텍스트에는 value와 onValueChange(value, details)를 함께 사용하고, 네이티브 비제어 및 폼 초기화 동작에는 defaultValue를 사용하세요. 이벤트 객체가 필요하면 네이티브 onChange를 사용하세요. aria-invalid="true", Base UI의 data-invalid, 네이티브 :invalid는 모두 잘못된 값의 테두리를 활성화해요. render 속성은 렌더링 요소를 교체하며 Base UI가 동작, 상태, ref, .tr-input 스타일을 병합해요.

TRInput.Group은 div를 렌더링하고 기본값이 md인 uiSize?: 'md' | 'lg'를 받아요. 네이티브 div 속성과 ref를 전달해요. 그 안에 놓인 입력은 그룹의 컨트롤 스타일을 스스로 가져가므로 그룹의 클래스 이름을 직접 적을 필요가 없어요. TRInput.Adornment는 span을 렌더링하고 기본값이 start인 side?: 'start' | 'end'를 받아요. TRInput.Action은 button을 렌더링하며 따로 지정하지 않으면 type="button"이에요. 각 파트는 TRInputGroup, TRInputAdornment, TRInputAction으로 개별 export도 되며 대응하는 속성 타입도 함께 제공돼요.