Tinyrack

Form

제출, 유효성, Base UI Field 오류를 다루는 네이티브 폼 래퍼예요.

핵심 속성

항목설명
제출네이티브 submit 이벤트와 FormData를 쓰거나 onFormSubmit으로 파싱된 필드 값을 받아요.
유효성 검사네이티브 validity와 함께 Base UI TRField.Error가 렌더링하는 외부 errors를 같이 써요.
초기화네이티브 type="reset"은 비제어 값을 되돌려요. 제어 값과 애플리케이션 결과는 onReset에서 직접 초기화하세요.
상태컨트롤은 비제어형으로 두거나 애플리케이션이 제어할 수 있고, 서버 오류와 제출 결과는 애플리케이션이 관리해요.

설치

pnpm add @tinyrack/ui

긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.

스타일

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

긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.

가져오기

import { TRForm } from '@tinyrack/ui/components/form';
import { TRField } from '@tinyrack/ui/components/field';
import { TRInput } from '@tinyrack/ui/components/input';
import { TRButton } from '@tinyrack/ui/components/button';

긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.

플레이그라운드

사용법

네이티브 FormData와 초기화 고유 링크

제출하면 FormData에서 이름이 지정된 입력을 읽어요. 초기화하면 최초 비제어 값을 복원하고 제출 결과를 지워요.

예시

필수 제출과 복구 고유 링크

비어 있는 채로 제출해 오류를 확인하고, 랙 이름을 입력한 다음 다시 제출해 성공을 확인하세요.

서버 오류와 복구 고유 링크

랙 알파가 서버 거부를 재현해요. 편집하면 TRField 오류가 지워지고 다시 제출하면 성공해요. 네이티브 reset은 값과 결과 상태를 모두 지워요.

명령형 validation과 첫 invalid focus 고유 링크

`actionsRef`로 이름이 지정된 TRField 하나나 전체 폼을 검증해요. 네이티브 submit은 첫 invalid TRField 컨트롤에 포커스하고 typed `onFormSubmit` 값은 문자열 타입을 유지해요.

API

TRForm은 네이티브 form props, ref, event, className, style, render를 전달하며 컨트롤은 자체 값을 계속 소유해요. TRFormProps<Values>는 onFormSubmit(values, details)을 통해 field-value generic을 보존하고, event detail에는 TRFormSubmitEventDetails와 TRFormSubmitEventReason을 사용할 수 있어요. 서버 응답에는 field name과 함께 errors를 사용하고 TRForm 또는 TRField 범위에서 validationMode를 선택하세요. submit 없이 명시적으로 검증하려면 TRFormActions.validate(name?)를 사용해요. 네이티브 reset은 비제어 컨트롤만 복원하므로 제어 값은 애플리케이션의 onReset handler에서 초기화해야 해요.