Logo Beartropy

Inputs

Our x-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.
blade 
            
 1<x-input label="Icon End" icon-end="user" />
 2<x-input label="Clearable" clearable />
 3<x-input label="Copy Token" copy-button value="abc123" />
 4<x-input label="Password" type="password" />
 5<x-input label="Icon + Clear" icon-end="user" clearable />
 6<x-input label="Icon + Copy" icon-end="user" copy-button value="abc123" />
 7<x-input label="Icon + Password" icon-end="user" type="password" />
 8<x-input label="Clear + Copy" clearable copy-button value="abc123" />
 9<x-input label="Clear + Password" clearable type="password" />
10<x-input label="Copy + Password" copy-button type="password" value="abc123" />
11<x-input label="Icon + Clear + Copy" icon-end="user" clearable copy-button value="abc123" />
12<x-input label="Icon + Clear + Password" icon-end="user" clearable type="password" />
13<x-input label="Icon + Copy + Password" icon-end="user" copy-button type="password" value="abc123" />
14<x-input label="Clear + Copy + Password" clearable copy-button type="password" value="abc123" />
15<x-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.
#
#
🔎
blade 
            
 1<x-input label="Inicio con ícono" icon-start="user" />
 2 
 3<x-input label="Inicio con slot">
 4    <x-slot name="start">
 5        <span class="text-xs text-gray-500">#</span>
 6    </x-slot>
 7</x-input>
 8 
 9<x-input label="Ícono + Slot" icon-start="user">
10    <x-slot name="start">
11        <span class="text-xs text-gray-500">#</span>
12    </x-slot>
13</x-input>
14 
15<x-input label="Buscar" type="search" />
16 
17<x-input label="Buscar con slot" type="search">
18    <x-slot name="start">
19        <span class="text-xs text-gray-500">🔎</span>
20    </x-slot>
21</x-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)
blade 
            
1<x-input label="Spinner" wire:keydown.enter="loadingInput" type="search" />

Presets already there

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

Filled

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