Input

A text input component with label, help text, icons, clear button, copy-to-clipboard, password toggle, and slot integration for buttons and selects.

Basic Usage

<x-bt-input label="Name" placeholder="Enter your name..." />

Props

Colors

Two modes — outline (default) and fill:

{{-- Outline mode: transparent bg, colored ring on focus --}}
<x-bt-input label="Default" placeholder="Type..." />
<x-bt-input label="Blue" blue placeholder="Type..." />

{{-- Fill mode: tinted background matching the color --}}
<x-bt-input fill label="Default Fill" placeholder="Type..." />
<x-bt-input fill blue label="Blue Fill" placeholder="Type..." />

All 24 colors + primary: primary, beartropy, red, blue, green, yellow, purple, pink, gray, orange, amber, lime, emerald, teal, cyan, sky, indigo, violet, rose, fuchsia, slate, stone, zinc, neutral.

The primary color is a neutral gray with a beartropy focus ring — ideal for most forms.

You can also use the color prop dynamically:

<x-bt-input :color="$hasError ? 'red' : 'primary'" label="Email" />

Sizes

<x-bt-input xs label="Extra Small" />
<x-bt-input sm label="Small" />
<x-bt-input md label="Medium (default)" />
<x-bt-input lg label="Large" />
<x-bt-input xl label="Extra Large" />

Icons

<x-bt-input label="Email" icon-start="envelope" placeholder="you@example.com" />
<x-bt-input label="Search" icon-end="magnifying-glass" placeholder="Search..." />

Built-in Controls

Clear Button

Shown automatically when the input has a value (enabled by default):

<x-bt-input label="Clearable" value="Clear me" />

{{-- Disable --}}
<x-bt-input label="No Clear" :clearable="false" />

Copy to Clipboard

<x-bt-input label="API Key" :copy-button="true" :clearable="false" value="sk-1234abcd" />

Password Toggle

Automatically shown when type="password":

<x-bt-input label="Password" type="password" placeholder="••••••••" />

Slot Integration

Place buttons, selects, or other components inside the input as seamless addons. Chrome (borders, shadows, rounded corners) is automatically stripped.

End Slot — Button

<x-bt-input label="Message" placeholder="Type a message...">
    <x-slot:end>
        <x-bt-button color="beartropy">Send</x-bt-button>
    </x-slot:end>
</x-bt-input>

Start Slot — Button

<x-bt-input label="URL" placeholder="example.com">
    <x-slot:start>
        <x-bt-button color="gray" soft>https://</x-bt-button>
    </x-slot:start>
</x-bt-input>

Both Slots

<x-bt-input label="URL Builder" placeholder="my-page">
    <x-slot:start>
        <x-bt-button color="gray" soft>https://</x-bt-button>
    </x-slot:start>
    <x-slot:end>
        <x-bt-button color="green">Go</x-bt-button>
    </x-slot:end>
</x-bt-input>

Select in Slot

<x-bt-input label="Phone" placeholder="123-456-7890">
    <x-slot:start>
        <x-bt-select :options="['+1 US', '+44 UK', '+34 ES']" placeholder="Code" />
    </x-slot:start>
</x-bt-input>

Slots + Built-in Controls

Custom slots combine with icons, clearable, copy, etc.:

<x-bt-input label="Email" icon-start="envelope" :clearable="true" value="test@example.com">
    <x-slot:end>
        <x-bt-button color="beartropy">Send</x-bt-button>
    </x-slot:end>
</x-bt-input>

Livewire Integration

{{-- Deferred (default in Livewire 3) --}}
<x-bt-input wire:model="name" label="Name" />

{{-- Real-time --}}
<x-bt-input wire:model.live="search" label="Search" icon-start="magnifying-glass" />

{{-- Debounced --}}
<x-bt-input wire:model.live.debounce.300ms="query" label="Query" />

The spinner shows automatically when Livewire targets are detected.

Alpine.js Integration

{{-- External Alpine model --}}
<x-bt-input x-model="formData.name" label="Name" />

{{-- Standalone (local Alpine state) --}}
<x-bt-input label="Local" value="initial" />

Validation Errors

Errors are automatically detected from the Laravel validation error bag using the wire:model name:

{{-- Auto error from $errors bag --}}
<x-bt-input wire:model="email" label="Email" />

{{-- Custom error message --}}
<x-bt-input label="Code" :custom-error="$codeError" />

When in error state, the border turns red and an error message appears below.

Help Text

<x-bt-input label="Username" help="Choose a unique username" />
<x-bt-input label="Password" hint="Must be at least 8 characters" type="password" />

Disabled & Readonly

<x-bt-input label="Disabled" disabled placeholder="Cannot edit" />
<x-bt-input label="Readonly" readonly value="Read only value" />

Fill Mode + Slots

<x-bt-input fill color="blue" label="Blue Search" placeholder="Search...">
    <x-slot:end>
        <x-bt-button color="blue">Go</x-bt-button>
    </x-slot:end>
</x-bt-input>

Configuration

'component_defaults' => [
    'input' => [
        'color' => env('BEARTROPY_UI_INPUT_COLOR', 'primary'),
        'size' => env('BEARTROPY_UI_INPUT_SIZE', 'md'),
        'outline' => env('BEARTROPY_UI_INPUT_OUTLINE', true),
    ],
],

Dark Mode

All colors and modes include dark mode styles automatically. Outline mode uses bg-white dark:bg-gray-900, fill mode uses color-tinted backgrounds with dark variants.