7onicDESIGN SYSTEM

ChatInput

ChatInputは、AIチャットインターフェースに特化したテキスト入力コンポーネントです。自動リサイズ、送信ボタン、ローディング状態を一体として管理し、チャットUIをすぐに構築できます。

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
背景色付きのスタイル。チャット画面のフォームに溶け込むデザインに適している。
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にするとボタンが停止アイコンに変わり、ボタンは有効のままです。onStopで生成を中断できます。

<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で入力と送信をまとめて無効化します。opacity-50で状態を視覚的に伝えます。

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

Customization

送信ボタンのアイコンはchildrenで自由に差し替えられる。

カスタムアイコン

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

ボイス入力スタイル

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

API

Component Structure

ChatInput— Compound · Pure React
ChatInputコンテキストプロバイダー + コンテナ
ChatInputField自動リサイズテキストエリア
ChatInputSubmit送信 / 停止ボタン

サブコンポーネント構成。ChatInput（Root）、ChatInputField（テキストエリア）、ChatInputSubmit（送信ボタン）の3部構成です。

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

trueで入力と送信をまとめて無効化する

onSubmitundefined
(value: string) => void

送信時のコールバック — 入力テキストを引数として受け取る

classNameundefined
string

追加のCSSクラス

ChatInputField

maxRows8
number

テキストエリアの最大表示行数（超えるとスクロール）

showCountfalse
boolean

文字数カウンターを表示する（maxLength必須）

maxLengthundefined
number

入力可能な最大文字数

placeholderundefined
string

空のときに表示するヒントテキスト

classNameundefined
string

追加のCSSクラス

ChatInputSubmit

loadingfalse
boolean

trueで停止アイコンに切り替え — ボタンは有効のまま

onStopundefined
() => void

loading状態でクリックされたときのコールバック

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
送信行 — カウンター＋ボタンを含む
4
Counter
オプションの文字数カウンター
5
Send Button
送信 / 停止アイコンボタン

Best Practices

✓

推奨

  • ✓onSubmitで非同期処理のローディング状態を管理する
  • ✓maxRowsで高さの増加を制限する
  • ✓placeholderで入力欄の用途を明示する
✕

避けるべき

  • ✗uncontrolled modeでonSubmit外でフィールド値を変更しない
  • ✗loadingとdisabledを同時に設定しない
  • ✗汎用フォームに使わない — Textareaを使用する

Accessibility

キーボード操作

Enterメッセージを送信
Shift + Enter改行を挿入
Tab送信ボタンにフォーカス移動

ARIA / WCAG

  • textarea要素 — スクリーンリーダーが正しく読み上げ
  • 送信ボタンにaria-labelを自動設定（送信 / 停止）
  • disabled状態は視覚的 + aria的に区別（pointer-events-none + opacity-50）