Input

Component

독립적인 텍스트 입력 컴포넌트. 레이블, 에러, 힌트, 아이콘 지원.

input

Related docs

bun add @reopt-ai/opt-ui

100%

Basic

이름

이메일

With Hint

비밀번호

8자 이상 입력하세요

사용자명

영문, 숫자만 사용 가능

Error State

사용자명

이미 사용 중인 이름입니다

이메일

올바른 이메일 형식이 아닙니다

With Icons

검색

금액

원

Input

Prop	Type	Default	Description
label	string	—	입력 필드 레이블
error	string	—	에러 메시지. 표시 시 aria-invalid=true 설정
hint	string	—	힌트 텍스트 (에러 없을 때만 표시)
leftIcon	ReactNode	—	입력 필드 왼쪽에 표시할 아이콘
rightIcon	ReactNode	—	입력 필드 오른쪽에 표시할 아이콘
fullWidth	boolean	false	전체 너비 사용 여부

컴포넌트 의존 관계

깊이

View test results

테스트 커버리지

2026년 7월 9일11/11 통과

11성공

0실패

11전체

textbox role을 렌더링한다
label을 렌더링하고 연결한다
error 메시지를 표시한다
hint 텍스트를 표시한다
타이핑이 가능하다
required prop이 RequiredMark를 표시한다
aria-required를 설정한다
aria-describedby가 hint에 연결된다
label 없이 aria-label만 있어도 hint를 aria-describedby로 연결한다
size=sm 스타일을 적용한다
size=lg 스타일을 적용한다

Blocks that use this component

MarketplaceCatalog

Display

WorkflowRunHistory

Workflow

Related components

Select

Input

Combobox

Input

Button

Input

Switch

Input

Textarea

Input

Checkbox

Input

Component

독립적인 텍스트 입력 컴포넌트. 레이블, 에러, 힌트, 아이콘 지원.

input

Related docs

bun add @reopt-ai/opt-ui

100%

Basic

이름

이메일

With Hint

비밀번호

8자 이상 입력하세요

사용자명

영문, 숫자만 사용 가능

Error State

사용자명

이미 사용 중인 이름입니다

이메일

올바른 이메일 형식이 아닙니다

With Icons

검색

금액

원

Input

Prop	Type	Default	Description
label	string	—	입력 필드 레이블
error	string	—	에러 메시지. 표시 시 aria-invalid=true 설정
hint	string	—	힌트 텍스트 (에러 없을 때만 표시)
leftIcon	ReactNode	—	입력 필드 왼쪽에 표시할 아이콘
rightIcon	ReactNode	—	입력 필드 오른쪽에 표시할 아이콘
fullWidth	boolean	false	전체 너비 사용 여부

컴포넌트 의존 관계

깊이

View test results

테스트 커버리지

2026년 7월 9일11/11 통과

11성공

0실패

11전체

textbox role을 렌더링한다
label을 렌더링하고 연결한다
error 메시지를 표시한다
hint 텍스트를 표시한다
타이핑이 가능하다
required prop이 RequiredMark를 표시한다
aria-required를 설정한다
aria-describedby가 hint에 연결된다
label 없이 aria-label만 있어도 hint를 aria-describedby로 연결한다
size=sm 스타일을 적용한다
size=lg 스타일을 적용한다

Blocks that use this component

마켓플레이스

에이전트와 스킬을 찾아보세요

MarketplaceCatalog

Display

기본 사용

Workflow Run History

Search by run ID, workflow, or trigger

Status

Run ID	Workflow	Status	Duration	Started
run-001	Nightly ETL	success	1.8s	2026. 5. 24. 오후 6:46:00
run-002	Webhook Handler	error	430ms	2026. 5. 24. 오후 6:26:00
run-003	Monthly Billing	running	940ms	2026. 5. 24. 오후 6:54:00

WorkflowRunHistory

Workflow

마켓플레이스

에이전트와 스킬을 찾아보세요

기본 사용

Workflow Run History

Search by run ID, workflow, or trigger

Status

Run ID	Workflow	Status	Duration	Started
run-001	Nightly ETL	success	1.8s	2026. 5. 24. 오후 6:46:00
run-002	Webhook Handler	error	430ms	2026. 5. 24. 오후 6:26:00
run-003	Monthly Billing	running	940ms	2026. 5. 24. 오후 6:54:00

기본 사용

프레임워크

여러 Select

크기

색상

다중 선택

기술 스택

선택됨: react, svelte

기본 사용

그룹화

Variants

Sizes

States

Loading & Disabled

With Icons

Basic

알림 받기

새로운 업데이트를 알림으로 받습니다.

다크 모드

어두운 테마를 사용합니다.

마케팅 수신

프로모션 및 이벤트 정보를 받습니다.

Sizes

Small

Medium

Large

Disabled

Off (disabled)

On (disabled)

Without Label

Basic

설명

메모

With Hint

자기소개

500자 이내로 작성하세요

Error State

필수 입력

필수 입력 항목입니다

Resize Options

크기 조절 없음

세로만 조절

Input

Basic

With Hint

Error State

With Icons

Input

컴포넌트 의존 관계

테스트 커버리지

Blocks that use this component

MarketplaceCatalog

WorkflowRunHistory

Related components

Select

Combobox

Button

Switch

Textarea

Checkbox

Input

Basic

With Hint

Error State

With Icons

Input

컴포넌트 의존 관계

테스트 커버리지

Blocks that use this component

MarketplaceCatalog

WorkflowRunHistory

Related components

Select

Combobox

Button

Switch

Textarea

Checkbox

마켓플레이스

코드 리뷰 에이전트

웹 스크래퍼

번역 스킬

기본 사용

Workflow Run History

기본 사용

여러 Select

다중 선택

기본 사용

그룹화

Variants

Sizes

States

Loading & Disabled

With Icons

Basic

Sizes

Disabled

Without Label

Basic

With Hint

Error State

Resize Options

Basic

Sizes

Indeterminate

CheckboxGroup

Horizontal Layout