`Thread.MessageForm.Field`

Input area for composing a message and attaching files.

app.tsx

import { Thread } from '@superinterface/react' export const App = () => ( <Thread.MessageForm> <Thread.MessageForm.Field /> <Thread.MessageForm.Submit /> </Thread.MessageForm> )

Subcomponents

`Thread.MessageForm.Field.Root`

Wrapper that groups the text input and file controls.

app.tsx

<Thread.MessageForm.Field.Root className="field-root"> <Thread.MessageForm.Field.Files.Control /> <Thread.MessageForm.Field.Control /> <Thread.MessageForm.Field.Files.Preview /> </Thread.MessageForm.Field.Root>

`Thread.MessageForm.Field.Control`

Renders the message textarea. Compose with its primitives to customise layout and behaviour.

`Thread.MessageForm.Field.Control.Root`

Container around the textarea control.

app.tsx

<Thread.MessageForm.Field.Control.Root className="grow"> <Thread.MessageForm.Field.Control.Input /> </Thread.MessageForm.Field.Control.Root>

`Thread.MessageForm.Field.Control.Input`

Actual textarea element. Accepts all standard textarea props.

app.tsx

<Thread.MessageForm.Field.Control.Input placeholder="Ask anything" />

`Thread.MessageForm.Field.Files.Control`

Button that opens a file picker. Selected files are attached to the next message.

app.tsx

<Thread.MessageForm.Field.Files.Control className="add-files" />

`Thread.MessageForm.Field.Files.Preview`

Displays previews of files selected with Files.Control.

app.tsx

<Thread.MessageForm.Field.Files.Preview />

All primitives accept className and style props.