reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
Form
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Form

Component

Build accessible forms with opt-ui-primitives Form APIs, field validation, specialized inputs, and shared form store hooks.

formtrigger
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { FormRoot, FormProvider, FormGroup, FormGroupLabel, FormDescription, FormField, FormControl, FormInput, FormTextarea, FormSelect, FormSelectPopover, FormSelectItem, FormSwitch, FormLabel, FormError, FormSubmit, FormCheckbox, FormRadioGroup, FormRadio, FormPush, FormRemove, FormReset, FormNumberInput, FormSlider, FormStarRating, FormColorPicker, FormIconPicker, FormTagInput, FormDateRangePicker, useFormStore, useFormContext } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

기본 사용

회사 이메일을 입력해주세요.

FormGroup — 필드 시맨틱 그룹핑

개인 정보
직무 정보

FormField + FormControl + FormDescription

영문, 숫자, 하이픈만 사용 가능합니다.

최대 200자까지 입력할 수 있습니다.

FormCheckbox + FormRadioGroup — Form Store 바인딩

구독 설정
요금제 선택

FormPush + FormRemove — 동적 배열 필드

태그 목록

태그를 추가하거나 제거할 수 있습니다.

FormProvider — Context 기반 폼 공유

프로필 설정 — Textarea + Switch

마케팅 알림 수신

FormSelect — 드롭다운 선택

종합 — 회원가입 폼

계정 정보

영문, 숫자를 포함하여 8자 이상 입력해주세요.

역할
보유 기술

보유한 기술 스택을 입력해주세요.

Usage examples

Basic form
Validation and asynchronous submission
schemaValidator (Zod)

FormRoot

PropTypeDefaultDescription
storeFormStore—useFormStore()로 생성한 폼 스토어. 미지정 시 자식의 FormProvider가 제공.
childrenRequiredReactNode—폼 필드들
classNamestring—기본 스타일 오버라이드

FormInput

PropTypeDefaultDescription
nameRequiredstring—폼 필드 이름 (스토어 키와 매칭)
typestring"text"입력 타입
placeholderstring—플레이스홀더
classNamestring—기본 스타일 오버라이드

FormTextarea

PropTypeDefaultDescription
nameRequiredstring—폼 필드 이름
rowsnumber4표시 줄 수
resize"none" | "vertical" | "horizontal" | "both""vertical"크기 조절 방향
placeholderstring—플레이스홀더
classNamestring—추가 CSS 클래스

FormSelect

PropTypeDefaultDescription
idstring—트리거 ID. 외부 FormLabel의 htmlFor와 연결
aria-labelstring—입력의 접근 가능한 이름
aria-describedbystring—설명·오류 요소의 ID 목록
nameRequiredstring—폼 필드 이름
childrenRequiredReactNode—FormSelectPopover 등 자식 요소
placeholderstring—미선택 시 표시 텍스트
classNamestring—추가 CSS 클래스

FormSelectPopover

PropTypeDefaultDescription
childrenRequiredReactNode—FormSelectItem 목록
sameWidthbooleantrue트리거와 같은 너비
gutternumber4트리거와의 간격 (px)

FormSelectItem

PropTypeDefaultDescription
valueRequiredstring—옵션 값
childrenRequiredReactNode—옵션 레이블

FormSwitch

PropTypeDefaultDescription
nameRequiredstring—폼 필드 이름
size"sm" | "md" | "lg""md"스위치 크기
disabledboolean—비활성화 상태

FormLabel

PropTypeDefaultDescription
nameRequiredstring—연결된 필드 이름
childrenRequiredReactNode—레이블 텍스트
classNamestring—기본 스타일 오버라이드

FormError

PropTypeDefaultDescription
nameRequiredstring—연결된 필드 이름
classNamestring—기본 스타일 오버라이드

FormSubmit

PropTypeDefaultDescription
childrenRequiredReactNode—버튼 텍스트
classNamestring—기본 스타일 오버라이드

FormProvider

PropTypeDefaultDescription
storeRequiredFormStore—useFormStore()로 생성한 폼 스토어
childrenRequiredReactNode—자식 폼 요소

FormGroup

PropTypeDefaultDescription
childrenRequiredReactNode—그룹 내 필드들
classNamestring—기본 스타일 오버라이드

FormGroupLabel

PropTypeDefaultDescription
childrenRequiredReactNode—그룹 레이블 텍스트
classNamestring—기본 스타일 오버라이드

FormDescription

PropTypeDefaultDescription
nameRequiredstring—연결된 필드 이름
childrenRequiredReactNode—도움말 텍스트
classNamestring—기본 스타일 오버라이드

FormField

PropTypeDefaultDescription
nameRequiredstring—필드 이름
childrenRequiredReactNode—label + input + error 등
classNamestring—기본 스타일 오버라이드

FormControl

PropTypeDefaultDescription
nameRequiredstring—연결된 필드 이름
classNamestring—기본 스타일 오버라이드

FormCheckbox

PropTypeDefaultDescription
nameRequiredstring—폼 필드 이름 (스토어 키)
classNamestring—기본 스타일 오버라이드

FormRadioGroup

PropTypeDefaultDescription
nameRequiredstring—폼 필드 이름 (스토어 키)
childrenRequiredReactNode—FormRadio 목록
classNamestring—기본 스타일 오버라이드

FormRadio

PropTypeDefaultDescription
nameRequiredstring—폼 필드 이름 (스토어 키)
valueRequiredstring—라디오 값
classNamestring—기본 스타일 오버라이드

FormPush

PropTypeDefaultDescription
nameRequiredstring—배열 필드 이름
valueRequiredunknown—추가할 기본값
childrenRequiredReactNode—버튼 텍스트
classNamestring—기본 스타일 오버라이드

FormRemove

PropTypeDefaultDescription
nameRequiredstring—배열 필드 이름
indexRequirednumber—제거할 인덱스
childrenRequiredReactNode—버튼 텍스트
classNamestring—기본 스타일 오버라이드

FormReset

PropTypeDefaultDescription
childrenRequiredReactNode—버튼 텍스트
classNamestring—기본 스타일 오버라이드

useFormContext

PropTypeDefaultDescription

useFormStore

PropTypeDefaultDescription
defaultValuesRecord<string, unknown>—초기 폼 값

컴포넌트 의존 관계

깊이
▲ USED BY (5)settings-formform-loginform-wizardform-dynamicform-uploadForm
View test results

테스트 커버리지

2026년 7월 9일17/17 통과
17성공
0실패
17전체
  • 폼 요소를 렌더링한다
  • 입력 필드에 타이핑할 수 있다
  • FormTextarea를 렌더링한다
  • FormSelect를 렌더링한다
  • FormSwitch를 렌더링한다
  • FormSwitch 크기 변형을 지원한다
  • FormTextarea는 form context 없이 사용하면 예외를 던진다
  • FormSelect는 form context 없이 사용하면 예외를 던진다
  • FormSwitch는 form context 없이 사용하면 예외를 던진다
  • FormProvider로 store를 context 제공한다
  • FormGroup + FormGroupLabel을 렌더링한다
  • FormDescription을 렌더링한다
  • FormField + FormControl을 렌더링한다
  • FormCheckbox를 렌더링한다
  • FormRadioGroup + FormRadio를 렌더링한다
  • FormReset을 렌더링한다
  • FormPush와 FormRemove를 렌더링한다

Related components

opt-ui

SettingsForm

Shells

Build settings forms from data with validation, radio buttons, and checkboxes.

opt-ui

AuthForm

Shells

Switch between sign-in and sign-up forms with email and password validation and a remember-me option.

opt-ui

WizardForm

Shells

Guide sequential input with field definitions, per-step validation, an associated progress indicator, and a review step.

opt-ui

DynamicFieldForm

Shells

Add and remove fields at runtime with count limits, individual validation, and dynamic store updates.

opt-ui

FileUploadForm

Shells

Select files with metadata, image previews, size limits, and description input.

opt-ui

StepBuilder

Core

Add, remove, and reorder an ordered sequence of steps.

PreviousToolbarNextButton