<x-bt-chat-input />
Customize via presets →
Basic Usage
1<x-bt-chat-input id="chat-basic" wire:model="message" />Label
Display a label above the input.
1<x-bt-chat-input id="chat-label" wire:model="message" label="Message" />Placeholder
Defaults to the localized "Type a message..." text. Override with the placeholder prop.
1<x-bt-chat-input id="chat-placeholder" wire:model="message" placeholder="Ask anything..." />Submit on Enter
By default, pressing Enter submits the form (or fires the action). Shift+Enter adds a newline. Disable with :submitOnEnter="false" to make Enter always add a newline.
1<x-bt-chat-input id="chat-enter-on" wire:model="message" placeholder="Enter submits (default)" />2<x-bt-chat-input id="chat-enter-off" wire:model="message" :submitOnEnter="false" placeholder="Enter adds newline" />Livewire Action
Use the action prop to fire a specific Livewire method on submit instead of native form submission.
Press Enter or click the send button to trigger the sendMessage action.
1<x-bt-chat-input id="chat-action" wire:model="messageAction" action="sendMessage" placeholder="Press Enter to send...">2 <x-slot:actions>3 <x-bt-button-icon icon="paper-airplane" solid beartropy wire:click="sendMessage" label="Send" />4 </x-slot:actions>5</x-bt-chat-input>Layout Modes
The chat input supports two layout modes. In inline mode (default), tools and actions sit alongside the textarea. In stacked mode, they wrap below. The component auto-switches from inline to stacked when the textarea grows beyond one line.
Inline Layout
Tools on the left, textarea in the center, actions on the right — all in one row.
1<x-bt-chat-input id="chat-inline" wire:model="messageInline" action="sendMessageInline" placeholder="Type a message...">2 <x-slot:tools>3 <x-bt-button-icon icon="paper-clip" ghost gray sm label="Attach" />4 </x-slot:tools>5 <x-slot:actions>6 <x-bt-button-icon icon="paper-airplane" solid beartropy sm label="Send" wire:click="sendMessageInline" />7 </x-slot:actions>8</x-bt-chat-input>Stacked Layout
Textarea spans the full width, tools and actions wrap below.
1<x-bt-chat-input id="chat-stacked" wire:model="messageStacked" action="sendMessageStacked" :stacked="true" placeholder="Type a message...">2 <x-slot:tools>3 <x-bt-button-icon icon="paper-clip" ghost gray sm label="Attach" />4 <x-bt-button-icon icon="photo" ghost gray sm label="Image" />5 </x-slot:tools>6 <x-slot:actions>7 <x-bt-button-icon icon="paper-airplane" solid beartropy sm label="Send" wire:click="sendMessageStacked" />8 </x-slot:actions>9</x-bt-chat-input>Max Length
Limit the number of characters the user can type.
1<x-bt-chat-input id="chat-maxlength" wire:model="messageMaxLength" :maxLength="100" placeholder="Max 100 characters..." />Border
Add a visible border around the component.
1<x-bt-chat-input id="chat-border" wire:model="messageBorder" :border="true" placeholder="With border..." />Colors
Set the accent color using a magic attribute or the color prop.
1<x-bt-chat-input id="chat-color-blue" wire:model="messageColor" blue :border="true" placeholder="Blue..." />2<x-bt-chat-input id="chat-color-green" wire:model="messageColor" green :border="true" placeholder="Green..." />3<x-bt-chat-input id="chat-color-red" wire:model="messageColor" red :border="true" placeholder="Red..." />4<x-bt-chat-input id="chat-color-purple" wire:model="messageColor" purple :border="true" placeholder="Purple..." />Help Text
Press Enter to send, Shift+Enter for newline
Markdown supported
1<x-bt-chat-input id="chat-help" wire:model="message" help="Press Enter to send, Shift+Enter for newline" />2<x-bt-chat-input id="chat-hint" wire:model="message" hint="Markdown supported" />Disabled & Readonly
1<x-bt-chat-input id="chat-disabled" wire:model="message" :disabled="true" placeholder="Disabled..." />2<x-bt-chat-input id="chat-readonly" wire:model="message" :readonly="true" placeholder="Readonly..." />Validation Errors
Errors are automatically detected from the Laravel validation error bag using the wire:model name. You can also force an error with custom-error.
Auto Validation
Submit an empty message to see the validation error.
1<x-bt-chat-input id="chat-validated" wire:model="messageValidated" placeholder="Type at least 3 characters..." :border="true">2 <x-slot:actions>3 <x-bt-button-icon icon="paper-airplane" solid beartropy sm wire:click="submitValidated" label="Send" />4 </x-slot:actions>5</x-bt-chat-input>Custom Error
Force an error state regardless of validation.
Connection lost. Please try again.
1<x-bt-chat-input id="chat-custom-error" wire:model="message" :custom-error="'Connection lost. Please try again.'" :border="true" />Real-World Example
A chat composer with attachment tools, a send action, and character limit.
1<div class="max-w-lg"> 2 <x-bt-chat-input 3 id="chat-realworld" 4 wire:model="messageInline" 5 action="sendMessageInline" 6 :border="true" 7 :maxLength="500" 8 placeholder="Message #general..." 9 >10 <x-slot:tools>11 <x-bt-button-icon icon="paper-clip" ghost gray sm label="Attach file" />12 <x-bt-button-icon icon="face-smile" ghost gray sm label="Emoji" />13 </x-slot:tools>14 <x-slot:actions>15 <x-bt-button-icon icon="paper-airplane" solid beartropy sm label="Send" wire:click="sendMessageInline" />16 </x-slot:actions>17 </x-bt-chat-input>18</div>Slots
| Slot | Description |
|---|---|
tools
|
Left-side tool buttons (e.g., attach file, emoji picker). Rendered inside the inline or stacked footer area.
|
actions
|
Right-side action buttons (e.g., send button). Alias:
footer.
|
Props
| Prop | Type | Default | Description |
|---|---|---|---|
id
|
string|null
|
auto-generated
|
Component ID. Auto-generated if not provided.
|
name
|
string|null
|
same as id
|
Input name attribute.
|
label
|
string|null
|
null
|
Label text displayed above the input.
|
placeholder
|
string
|
Type a message...
|
Placeholder text. Defaults to a localized string.
|
color
|
string|null
|
null
|
Color preset name. Use magic attributes or
:color="$var" for dynamic values.
|
disabled
|
bool
|
false
|
Disables the input.
|
readonly
|
bool
|
false
|
Sets the input to read-only.
|
required
|
bool
|
false
|
Marks the input as required.
|
help
|
string|null
|
null
|
Help text displayed below the input.
|
hint
|
string|null
|
null
|
Alias for
help.
|
customError
|
mixed
|
null
|
Custom error message (bypasses validation bag).
|
maxLength
|
int|null
|
null
|
Maximum number of characters allowed.
|
stacked
|
bool
|
false
|
Enables stacked layout. Textarea spans full width, tools and actions wrap below.
|
submitOnEnter
|
bool
|
true
|
Submit on Enter key. Shift+Enter always adds a newline. Set
false to make Enter add a newline too.
|
action
|
string|null
|
null
|
Livewire method to call on submit. Fires
$wire.call(action) instead of native form submission.
|
border
|
bool
|
false
|
Show a visible border around the component.
|