Form

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

여러 Field에 걸쳐 제출 검증과 서버 오류를 조정하세요. onFormSubmit이 이름이 있는 Field에서 값을 수집합니다. 원시 네이티브 제출 값이 필요하면 onSubmit에서 FormData를 읽으세요. 미리보기의 서버 오류 버튼은 로컬 상태만 변경합니다.

비동기 검증이 항상 제출을 막는다고 가정하지 마세요. 실제 요청, 권한, 중복 제출 방지는 제품에서 처리하세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Form → Field / Fieldset + submit / reset + result status

키보드와 접근성

Enter나 제출 버튼이 폼을 검증하고 첫 번째 유효하지 않은 입력으로 포커스를 이동합니다. 입력을 편집하면 서버 오류가 지워집니다. Reset은 초기 값을 복원합니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { Form, Field, Button } from '@surflane/ui'

<Form errors={serverErrors} onFormSubmit={savePreview}>
  <Field.Root name='project'>
    <Field.Label>Project name</Field.Label>
    <Field.Control required />
    <Field.Error />
  </Field.Root>
  <Button type='submit'>Save preview</Button>
  <Button type='reset' variant='outline'>
    Reset
  </Button>
</Form>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰