Chat Input
The
It supports tools/actions slots, validation states, and standard attributes.
x-bt-chat-input component is a textarea that auto-resizes to fit its content, ideal for chat
interfaces or comment sections. It now supports auto-expanding textareas and stacked layouts.
It supports tools/actions slots, validation states, and standard attributes.
Inline Layout
Inline layout with tools and actions slots.
1<x-bt-chat-input wire:model="messageInline" action="sendMessageInline" 2 placeholder="Type with tools on left..."> 3 <x-slot:tools> 4 <x-beartropy-ui::icon name="paper-clip" class="w-6 h-6 cursor-pointer" wire:click="clippy" /> 5 </x-slot:tools> 6 <x-slot:actions> 7 <x-beartropy-ui::icon name="paper-airplane-right" set="beartropy" class="w-6 h-6 cursor-pointer" 8 wire:click="sendMessageInline" /> 9 </x-slot:actions>10</x-bt-chat-input>Stacked Layout & Slots
Use the stacked prop for a more compact layout where the submit action is integrated.
You can also use tools (left) and actions (right) slots for extra functionality.
1<x-bt-chat-input wire:model="messageStacked" action="sendMessageStacked" stacked 2 placeholder="Type with tools on left..."> 3 <x-slot:tools> 4 <x-beartropy-ui::icon name="paper-clip" class="w-6 h-6 cursor-pointer" wire:click="asdasd" /> 5 </x-slot:tools> 6 <x-slot:actions> 7 <x-beartropy-ui::icon name="paper-airplane-right" set="beartropy" class="w-6 h-6 cursor-pointer" 8 wire:click="sendMessageStacked" /> 9 </x-slot:actions>10</x-bt-chat-input>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label
|
string|null
|
null
|
Label text displayed above the input.
|
placeholder
|
string
|
''
|
Placeholder text.
|
rows
|
int
|
1
|
Initial number of rows for the textarea.
|
name
|
string|null
|
null
|
Input name attribute. Defaults to a generated ID if not provided.
|
id
|
string|null
|
null
|
Input ID attribute. Defaults to a unique ID.
|
color
|
string|null
|
null
|
Color preset key.
|
disabled
|
bool
|
false
|
Disables the input.
|
readonly
|
bool
|
false
|
Sets the input to read-only.
|
required
|
bool
|
false
|
Mark the input as required.
|
help
|
string|null
|
null
|
Help text to display below the input.
|
customError
|
string|null
|
null
|
Forces an error message to be displayed.
|
maxLength
|
int|null
|
null
|
Maximum number of characters allowed.
|
stacked
|
bool
|
false
|
Enables the stacked layout style.
|
submitOnEnter
|
bool
|
false
|
If true, pressing Enter will submit the form (if within one) or trigger action.
|
footer
|
slot
|
null
|
Slot for content below the text input (e.g., buttons).
|
tools
|
slot
|
null
|
Slot for tools (usually icons) on the left side of the footer/bar.
|
actions
|
slot
|
null
|
Slot for actions (usually buttons) on the right side.
|
action
|
string|slot
|
null
|
Action to trigger on enter/submit, or slot for actions.
|
Code highlighting provided by Torchlight
Current version:
0.11.5