> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# ChatInput
> A chat-style multi-line input with an integrated toolbar containing an optional file-attach button, optional right-side controls (e.g. a model selector), and a submit button — all inside a single bordered container.
```tsx theme={null}
import { ChatInput } from "@fanvue/ui";
import type {
ChatInputAttachmentItem,
ChatInputProps,
ChatInputSelectOption,
} from "@fanvue/ui";
```
## Examples
## Default
```tsx theme={null}
import { ChatInput } from "@fanvue/ui";
```
## With Placeholder
```tsx theme={null}
import { ChatInput } from "@fanvue/ui";
```
## With File Button
```tsx theme={null}
import { ChatInput } from "@fanvue/ui";
```
## Full Feature
```tsx theme={null}
import { useState } from "react";
import { AIIcon, BulbIcon, ChatInput } from "@fanvue/ui";
const SELECT_OPTIONS = [
{
value: "fanvue-ai",
// Short label on the collapsed trigger; longer title inside the menu/sheet.
label: "Fanvue AI",
menuLabel: "Fanvue AI",
description: "Most capable for ambitious work",
icon: ,
},
{
value: "example",
label: "Example",
menuLabel: "Example model",
description: "Fastest for quick answers",
icon: ,
},
];
function Example() {
const [value, setValue] = useState("");
const [model, setModel] = useState("fanvue-ai");
const [fileHint, setFileHint] = useState(null);
return (
setValue(e.target.value)}
onSubmit={() => setValue("")}
showFileButton
onFileClick={() => setFileHint("Attach tapped.")}
selectOptions={SELECT_OPTIONS}
selectValue={model}
onSelectChange={setModel}
/>
{fileHint ? (
) : null}
);
}
```
## Disabled
```tsx theme={null}
import { ChatInput } from "@fanvue/ui";
```
## Props
## ChatInput
A chat-style multi-line input with an integrated toolbar containing an optional file-attach button, optional right-side controls (e.g. a model selector), and a submit button — all inside a single bordered container.
Designed to behave like modern AI chat inputs: auto-grows with content, submits on Enter (Shift+Enter for newlines), and keeps controls inline.
Replaces the built-in attachment strip entirely. When set to any value other than `undefined` (including `null` or `[]`), `ChatInputProps.attachments` is ignored.
Image attachments shown in the built-in thumbnail strip. Ignored when `ChatInputProps.attachmentPreviews` is provided (including `null`).
Additional className applied to the outermost container.
Accessible label for the attach-file button.
Whether a submission is in progress (disables submit, shows visual feedback).
Maximum number of visible rows before scrolling.
Minimum number of visible rows.
Called when the user removes a built-in thumbnail. The remove button is disabled when this is omitted or the input is `ChatInputProps.disabled`.
Callback fired when the attach-file button is clicked. Only relevant when `showFileButton` is `true`.
Callback fired when the user picks a different dropdown option.
Callback fired when the user submits (clicks the send button or presses Enter without Shift). Receives the current trimmed text value.
When `true`, disables only the built-in dropdown selector.
Title shown at the top of the `"sheet"` variant of the built-in selector (e.g. "Switch AI Model").
Options for the built-in inline dropdown selector (e.g. model picker). Ignored when `toolbarRight` is provided.
Currently selected value for the built-in dropdown. Should match one of `selectOptions[].value`.
How the built-in selector presents its options:
* `"menu"` (default) — a dropdown anchored to the trigger, for pointer/desktop.
* `"sheet"` — a bottom sheet, for mobile/touch viewports.
The viewport decision belongs to the consumer (it owns the breakpoint source of truth), so pass e.g. `selectVariant={isDesktop ? "menu" : "sheet"}`.
When `true`, renders an "attach file" button in the bottom-left toolbar.
Accessible label for the submit button.
Icon element for the submit button.
Optional content rendered in the bottom-right toolbar, to the left of the submit button. When provided, takes precedence over the built-in `selectOptions` dropdown.
## Exported types
Also exported from `@fanvue/ui`: `ChatInputAttachmentItem`, `ChatInputProps`, `ChatInputSelectOption`.
***
**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)