Logo Beartropy UI
Input
Our x-bt-input component is a fully featured input field designed for real-world apps.
It supports icons, slots, clearable fields, copy buttons, password toggles, and more.
All of these features can be combined seamlessly. Here's how it works:
You can customize this component

All Combinations (End Features)

The input supports these props:

  • icon-end: shows an icon on the right
  • clearable: shows an X to clear the field
  • copy-button: shows a copy-to-clipboard button
  • type="password": shows a toggle for visibility
You can combine them in any way. 

 1<x-bt-input label="Icon End" icon-end="user" />
 2<x-bt-input label="Clearable" clearable />
 3<x-bt-input label="Copy Token" copy-button value="abc123" />
 4<x-bt-input label="Password" type="password" />
 5<x-bt-input label="Icon + Clear" icon-end="user" clearable />
 6<x-bt-input label="Icon + Copy" icon-end="user" copy-button value="abc123" />
 7<x-bt-input label="Icon + Password" icon-end="user" type="password" />
 8<x-bt-input label="Clear + Copy" clearable copy-button value="abc123" />
 9<x-bt-input label="Clear + Password" clearable type="password" />
10<x-bt-input label="Copy + Password" copy-button type="password" value="abc123" />
11<x-bt-input label="Icon + Clear + Copy" icon-end="user" clearable copy-button value="abc123" />
12<x-bt-input label="Icon + Clear + Password" icon-end="user" clearable type="password" />
13<x-bt-input label="Icon + Copy + Password" icon-end="user" copy-button type="password" value="abc123" />
14<x-bt-input label="Clear + Copy + Password" clearable copy-button type="password" value="abc123" />
15<x-bt-input label="All features end" icon-end="user" clearable copy-button type="password" value="abc123" />

Start Content: Icon, Slot, Search

You can customize the left side of the input using either:

  • icon-start: shows an icon on the left
  • start slot: pass any custom content
  • type="search": shows a search icon automatically
These can also be combined.

#
#
🔎 
 1<x-bt-input label="Inicio con ícono" icon-start="user" />
 2<x-bt-input label="Inicio con slot">
 3    <x-slot name="start">
 4        <span class="text-xs text-gray-500">#</span>
 5    </x-slot>
 6</x-bt-input>
 7<x-bt-input label="Ícono + Slot" icon-start="user">
 8    <x-slot name="start">
 9        <span class="text-xs text-gray-500">#</span>
10    </x-slot>
11</x-bt-input>
12<x-bt-input label="Buscar" type="search" />
13<x-bt-input label="Buscar con slot" type="search">
14    <x-slot name="start">
15        <span class="text-xs text-gray-500">🔎</span>
16    </x-slot>
17</x-bt-input>
18<x-bt-input label="End slot" type="search" wire:model.live="passwordInputValue">
19    <x-slot name="end">
20        <span wire:click="generatePassword">
21            <x-bt-icon class="cursor-pointer hover:text-blue-500" name="arrow-path" />
22        </span>
23    </x-slot>
24</x-bt-input>

Spinner

The input integrates a spinner that detects when a wire:* is being processed to show itself.
(wire:model is ignored as its not an action) 

1<x-bt-input label="Spinner" wire:keydown.enter="loadingInput" wire:model.live="inputSpinnerValue" type="search" />

Presets already there

These presets are already available.

 1<x-bt-input outline label="Default" icon-start="user" />
 2<x-bt-input outline gray label="Gray" icon-start="document" />
 3<x-bt-input outline red label="Red" icon-start="exclamation-circle" />
 4<x-bt-input outline orange label="Orange" icon-start="fire" />
 5<x-bt-input outline amber label="Amber" icon-start="star" />
 6<x-bt-input outline yellow label="Yellow" icon-start="sun" />
 7<x-bt-input outline lime label="Lime" icon-start="bolt" />
 8<x-bt-input outline green label="Green" icon-start="check-circle" />
 9<x-bt-input outline emerald label="Emerald" icon-start="check" />
10<x-bt-input outline teal label="Teal" icon-start="cloud" />
11<x-bt-input outline cyan label="Cyan" icon-start="paper-airplane" />
12<x-bt-input outline sky label="Sky" icon-start="sparkles" />
13<x-bt-input outline blue label="Blue" icon-start="information-circle" />
14<x-bt-input outline indigo label="Indigo" icon-start="academic-cap" />
15<x-bt-input outline violet label="Violet" icon-start="beaker" />
16<x-bt-input outline purple label="Purple" icon-start="cube-transparent" />
17<x-bt-input outline pink label="Pink" icon-start="heart" />
18<x-bt-input outline rose label="Rose" icon-start="hand-thumb-up" />

Filled

These presets are already available.

 1<x-bt-input fill label="Default" icon-start="user" />
 2<x-bt-input fill gray label="Gray" icon-start="document" />
 3<x-bt-input fill red label="Red" icon-start="exclamation-circle" />
 4<x-bt-input fill orange label="Orange" icon-start="fire" />
 5<x-bt-input fill amber label="Amber" icon-start="star" />
 6<x-bt-input fill yellow label="Yellow" icon-start="sun" />
 7<x-bt-input fill lime label="Lime" icon-start="bolt" />
 8<x-bt-input fill green label="Green" icon-start="check-circle" />
 9<x-bt-input fill emerald label="Emerald" icon-start="check" />
10<x-bt-input fill teal label="Teal" icon-start="cloud" />
11<x-bt-input fill cyan label="Cyan" icon-start="paper-airplane" />
12<x-bt-input fill sky label="Sky" icon-start="sparkles" />
13<x-bt-input fill blue label="Blue" icon-start="information-circle" />
14<x-bt-input fill indigo label="Indigo" icon-start="academic-cap" />
15<x-bt-input fill violet label="Violet" icon-start="beaker" />
16<x-bt-input fill purple label="Purple" icon-start="cube-transparent" />
17<x-bt-input fill pink label="Pink" icon-start="heart" />
18<x-bt-input fill rose label="Rose" icon-start="hand-thumb-up" />

Props

Prop Type Default Description
type
string text
Input type. Any valid HTML input type is accepted: text, email, password, number, search, etc.
label
string|null null
Optional text label displayed above the input.
placeholder
string|null null
Placeholder text shown when the input is empty.
value
string|null null
Initial value for the input when used outside Livewire/Alpine external bindings.
color
string|null null
Color preset key used to style the input via the input preset.
size
string|null null
Size preset key. Available values depend on your input presets (e.g. sm, md, lg).
iconStart
string|null null
Icon name shown at the left side of the input. Renders using the Beartropy icon component.
iconEnd
string|null null
Icon name shown at the right side of the input.
iconStartSvg
string|null null
Raw SVG string to render at the left side. Overrides iconStart.
iconEndSvg
string|null null
Raw SVG for the right side. Overrides iconEnd.
copyButton
bool false
Adds a "copy to clipboard" button on the right. Shows checkmark feedback when copied.
clearable
bool true
Adds a clear (X) button. Clears the current text and resets internal Alpine state.
showPasswordToggle
bool false
When true and type="password", shows an eye button to toggle visibility.
customError
string|null null
Forces an error state and displays a custom error message, regardless of validation.
hint
string|null null
Optional help text rendered below the field via <x-beartropy-ui::support.field-help>.
help
string|null null
(Alias) Displays a hint/help message under the field.
spinner
bool true
Shows a loading spinner on the right when any Livewire action is in wire:loading.
wire:model
Livewire binding null
Enables Livewire binding. Automatically switches the component into Livewire-controlled mode.
x-model
Alpine binding null
Enables Alpine external binding. If present, the component syncs with the given Alpine variable.
value (internal)
string ''
When neither Livewire nor external Alpine binding is used, the component creates a local Alpine value variable for two-way binding.
start slot
slot null
Slot that appears at the left inside the input. Used for icons or custom HTML.
end slot
slot null
Slot that appears at the right side of the input. Works alongside icons, copy/clear/toggle.
Code highlighting provided by Torchlight