Ocean Road
가이드
컴포넌트
가이드
컴포넌트

TextInput

한 줄 텍스트 입력 컴포넌트입니다. 라벨, 에러 상태, 좌우 슬롯을 지원합니다.

사용법

import { TextInput } from '@coldsurfers/ocean-road'
import { Search } from 'lucide-react'

<TextInput
  label="이메일"
  placeholder="example@email.com"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

// 좌우 슬롯
<TextInput
  placeholder="검색어 입력"
  left={<Search size={16} />}
/>

// 에러 상태
<TextInput
  label="비밀번호"
  isError
  type="password"
/>

Props

InputHTMLAttributes<HTMLInputElement>를 모두 상속합니다.

prop 타입 기본값 설명
label string — 입력 필드 위에 표시될 라벨 텍스트
labelStyle CSSProperties — 라벨 인라인 스타일
isError boolean — true이면 에러 스타일을 적용합니다.
required boolean — true이면 라벨에 필수 표시를 추가합니다.
left ReactNode — 입력 필드 왼쪽 슬롯 (아이콘 등)
right ReactNode — 입력 필드 오른쪽 슬롯

ref

useRef<TextInputRef>로 프로그래매틱 제어가 가능합니다.

import { useRef } from 'react'
import { TextInput, type TextInputRef } from '@coldsurfers/ocean-road'

const inputRef = useRef<TextInputRef>(null)

<TextInput ref={inputRef} placeholder="..." />

// 포커스 / 블러
inputRef.current?.focus()
inputRef.current?.blur()

인터랙티브 데모

ON THIS PAGE