Input

core

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

컴포넌트 의존 관계

깊이

100%

Basic

이름

이메일

With Hint

비밀번호

8자 이상 입력하세요

사용자명

영문, 숫자만 사용 가능

Error State

사용자명

이미 사용 중인 이름입니다

이메일

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

With Icons

검색

금액

원

테스트 커버리지

2026년 2월 4일5/5 통과

5성공

0실패

5전체

textbox role을 렌더링한다
label을 렌더링하고 연결한다
error 메시지를 표시한다
hint 텍스트를 표시한다
타이핑이 가능하다

Input Props

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

Import

tsx

import { Input } from "@reopt-ai/opt-ui";

Input

core

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

컴포넌트 의존 관계

깊이

100%

Basic

이름

이메일

With Hint

비밀번호

8자 이상 입력하세요

사용자명

영문, 숫자만 사용 가능

Error State

사용자명

이미 사용 중인 이름입니다

이메일

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

With Icons

검색

금액

원

테스트 커버리지

2026년 2월 4일5/5 통과

5성공

0실패

5전체

textbox role을 렌더링한다
label을 렌더링하고 연결한다
error 메시지를 표시한다
hint 텍스트를 표시한다
타이핑이 가능하다

Input Props

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

Import

tsx

import { Input } from "@reopt-ai/opt-ui";