7onicDESIGN SYSTEM

ChatInput

ChatInput은 AI 채팅 인터페이스를 위해 설계된 복합 텍스트 입력 컴포넌트입니다. 자동 리사이즈, 전송/중지 버튼, 로딩 상태를 하나의 단위로 관리합니다.

2
Variants
3
Sizes
3
Parts
Pure
React

Playground

Preview
outlinedefaultdefault
ChatInput
Variant
Color
Layout
Size
Radius
State
Options
Submit
Radius
<ChatInput onSubmit={(value) => console.log(value)}>
  <ChatInputField placeholder="Ask me anything..." />
  <ChatInputSubmit />
</ChatInput>

Variants

Outline
테두리가 있는 기본 스타일. 대부분의 배경에 어울리는 범용 디자인입니다.
Default
Filled
배경색이 있는 스타일. 채팅 UI 표면에 자연스럽게 녹아드는 디자인입니다.
Emphasis

Sizes

sm
버튼28px
폰트14px
패딩10px / 12px
default
버튼32px
폰트14px
패딩12px / 16px
lg
버튼36px
폰트16px
패딩16px / 20px

Features

Auto Resize

입력 내용에 따라 텍스트 영역의 높이가 자동으로 조정됩니다. maxRows로 최대 줄 수를 제한할 수 있습니다.

<ChatInput onSubmit={(value) => console.log(value)}>
  <ChatInputField
    placeholder="Type multiple lines (Shift+Enter for newline)..."
    maxRows={5}
  />
  <ChatInputSubmit />
</ChatInput>

Character Count

showCount와 maxLength를 함께 사용하면 우측 하단에 실시간 문자 수 카운터가 표시됩니다.

<ChatInput onSubmit={(value) => console.log(value)}>
  <ChatInputField
    placeholder="Ask me anything..."
    showCount
    maxLength={500}
  />
  <ChatInputSubmit />
</ChatInput>

Loading State

loading=true로 설정하면 버튼이 중지 아이콘으로 전환됩니다. 버튼은 활성 상태를 유지해 사용자가 중단할 수 있습니다.

<ChatInput onSubmit={(value) => console.log(value)}>
  <ChatInputField placeholder="Response generating..." />
  <ChatInputSubmit loading onStop={() => console.log('stopped')} />
</ChatInput>

Filled Variant

variant="filled"는 배경색 스타일로, 입력창이 배경에 묻히는 채팅 화면에 적합합니다.

<ChatInput variant="filled" onSubmit={(value) => console.log(value)}>
  <ChatInputField placeholder="Ask me anything..." />
  <ChatInputSubmit />
</ChatInput>

Disabled

disabled=true로 입력과 전송을 동시에 비활성화합니다. 불투명도 감소로 상태를 시각적으로 전달합니다.

<ChatInput disabled onSubmit={(value) => console.log(value)}>
  <ChatInputField placeholder="Currently unavailable..." />
  <ChatInputSubmit />
</ChatInput>

Customization

ChatInputSubmit의 children prop으로 기본 전송 아이콘을 자유롭게 교체할 수 있습니다.

커스텀 아이콘

<ChatInputSubmit> <ArrowUp className="icon-xs" /> </ChatInputSubmit>

보이스 입력 스타일

<ChatInputSubmit> <Mic className="icon-xs" /> </ChatInputSubmit>

API

Component Structure

ChatInput— Compound · Pure React
ChatInput컨텍스트 프로바이더 + 컨테이너
ChatInputField자동 리사이즈 텍스트 영역
ChatInputSubmit전송 / 중지 버튼

서브컴포넌트 구성. ChatInput(루트), ChatInputField(텍스트 영역), ChatInputSubmit(전송 버튼)으로 구성됩니다.

Props

ChatInput

variant"outline"
"outline" | "filled"

시각 스타일. outline(테두리), filled(배경색)

size"default"
"sm" | "default" | "lg"

사이즈 스케일. sm, default, lg

radius"xl"
"sm" | "md" | "lg" | "xl" | "2xl" | "full"

컨테이너 모서리 둥글기

color"default"
"default" | "primary"

전송 버튼 색상. default(어두운 색), primary(브랜드 색상)

layout"default"
"default" | "inline"

레이아웃 방향. default(세로 배치), inline(입력 필드와 버튼 가로 배치)

disabledfalse
boolean

입력과 전송을 동시에 비활성화합니다

onSubmitundefined
(value: string) => void

전송 콜백. 현재 텍스트 값을 인수로 받습니다.

classNameundefined
string

추가 CSS 클래스

ChatInputField

maxRows8
number

최대 표시 줄 수 (초과 시 스크롤)

showCountfalse
boolean

문자 수 카운터 표시. maxLength 필수.

maxLengthundefined
number

최대 입력 문자 수

placeholderundefined
string

빈 상태에서 표시되는 힌트 텍스트

classNameundefined
string

추가 CSS 클래스

ChatInputSubmit

loadingfalse
boolean

중지 아이콘으로 전환. 버튼은 활성 상태 유지.

onStopundefined
() => void

로딩 상태에서 클릭 시 호출되는 콜백

buttonRadiusundefined
"sm" | "md" | "lg" | "xl" | "2xl" | "full"

버튼 모서리 둥글기 직접 지정 (미지정 시 컨테이너 radius에서 자동 산출)

childrenundefined
ReactNode

커스텀 아이콘. 기본값은 전송 아이콘.

classNameundefined
string

추가 CSS 클래스

Anatomy

1
2
3
4
0 / 500
5
1
ChatInput
컨테이너, 컨텍스트 프로바이더
2
ChatInputField
텍스트 영역 (자동 리사이즈)
3
ChatInputSubmit
Submit 행(카운터 + 버튼 포함)
4
Counter
선택적 문자 수 카운터
5
Send Button
전송 / 중지 아이콘 버튼

Best Practices

✓

권장

  • ✓비동기 전송 시 onSubmit에서 로딩 상태를 관리합니다
  • ✓maxRows로 높이 증가를 제한합니다
  • ✓명확한 placeholder로 용도를 안내합니다
✕

지양

  • ✗uncontrolled 모드에서 onSubmit 외부에서 값을 변경하지 않습니다
  • ✗loading과 disabled를 함께 사용하지 않습니다
  • ✗일반 폼에는 사용하지 않습니다. Textarea를 대신 사용하세요

Accessibility

키보드 조작

Enter메시지 전송
Shift + Enter줄바꿈 삽입
Tab전송 버튼으로 포커스 이동

ARIA / WCAG

  • textarea 요소. 스크린 리더가 정확히 읽어냅니다.
  • 전송 버튼에 aria-label 자동 설정 (전송 / 중지)
  • disabled 상태를 시각적으로 구별 (불투명도 감소)