Beartropy Logo UI
Input
<x-bt-input />
A text input with label, help text, icons, clear button, copy-to-clipboard, password toggle, and slot integration for buttons and selects. Supports outline and fill modes with full dark mode support.
Customize via presets →

Basic Usage 

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

Icons

Place icons at the start or end of the input using Heroicon names. 

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

Built-in Controls

Clearable, copy-to-clipboard, and password toggle — all combinable.

Individual Controls

clearable is enabled by default and shows when the input has a value. Use copyButton for clipboard copy. Password toggle appears automatically with type="password". 

1<x-bt-input label="Clearable" clearable value="Clear me" />
2<x-bt-input label="API Key" :copy-button="true" :clearable="false" value="sk-1234abcd" />
3<x-bt-input label="Password" type="password" placeholder="Enter password" />

All Controls Combined

All built-in controls can coexist on a single input. 

1<x-bt-input label="All Features" icon-end="user" clearable copy-button type="password" value="abc123" />

Sizes 

1<x-bt-input xs label="Extra Small" placeholder="xs" />
2<x-bt-input sm label="Small" placeholder="sm" />
3<x-bt-input label="Medium (default)" placeholder="md" />
4<x-bt-input lg label="Large" placeholder="lg" />
5<x-bt-input xl label="Extra Large" placeholder="xl" />

Colors

Two modes: outline (default) with a colored ring on focus, and fill with a tinted background. The primary color (default) is a neutral gray with a beartropy focus ring.

Outline Mode 

1<x-bt-input label="Primary (default)" placeholder="Type..." />
2<x-bt-input blue label="Blue" placeholder="Type..." />
3<x-bt-input red label="Red" placeholder="Type..." />
4<x-bt-input green label="Green" placeholder="Type..." />
5<x-bt-input purple label="Purple" placeholder="Type..." />

Fill Mode

Use the fill attribute for a tinted background that matches the color. 

1<x-bt-input fill label="Default Fill" placeholder="Type..." />
2<x-bt-input fill blue label="Blue Fill" placeholder="Type..." />
3<x-bt-input fill red label="Red Fill" placeholder="Type..." />
4<x-bt-input fill green label="Green Fill" placeholder="Type..." />
5<x-bt-input fill purple label="Purple Fill" placeholder="Type..." />

Dynamic colors

Set the color dynamically: <x-bt-input :color="$hasError ? 'red' : 'primary'" />

All available colors

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

Slot Integration

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

Start Slot 

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

End Slot 

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

Both Slots 

1<x-bt-input label="URL Builder" placeholder="my-page">
2    <x-slot:start>
3        <x-bt-button color="gray" soft>https://</x-bt-button>
4    </x-slot:start>
5    <x-slot:end>
6        <x-bt-button color="green">Go</x-bt-button>
7    </x-slot:end>
8</x-bt-input>

Select in Slot

Place a x-bt-select inside the input for patterns like phone number with country code.

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

Slots + Built-in Controls

Custom slots combine with icons, clearable, copy, and other built-in controls. 

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

Fill Mode + Slots

Slots work with fill mode. The button adapts to the tinted background. 

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

Livewire Integration

Wire Model Bindings

Use wire:model (deferred), wire:model.live (real-time), or wire:model.live.debounce (debounced). 

1<x-bt-input id="input-deferred" wire:model="name" label="Deferred" />
2<x-bt-input id="input-realtime" wire:model.live="search" label="Real-time" icon-start="magnifying-glass" />
3<x-bt-input id="input-debounced" wire:model.live.debounce.300ms="query" label="Debounced (300ms)" />

Spinner

The spinner shows automatically when a Livewire action is processing. Press Enter to trigger it. 

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

Alpine.js Integration

The input works with x-model for client-side state management.

Value: 

1<div x-data="{ name: 'John Doe' }">
2    <x-bt-input x-model="name" label="Alpine Model" />
3    <p class="mt-2 text-sm text-gray-500">Value: <strong x-text="name"></strong></p>
4</div>

Validation Errors

Errors are automatically detected from the Laravel validation error bag using the wire:model name. You can also force an error with customError.

Auto Validation

Submit without entering an email to see the error. The border turns red and the error message appears below. 

1<x-bt-input id="input-validated-email" wire:model="validatedEmail" label="Email" type="email" placeholder="you@example.com" />
2<x-bt-button wire:click="submitEmail" solid blue class="mt-3">Submit</x-bt-button>

Custom Error

Force an error state regardless of validation using customError.

Invalid verification code 

1<x-bt-input label="Code" :custom-error="'Invalid verification code'" />

Help Text

Use help or its alias hint to display text below the input.

Choose a unique username

Must be at least 8 characters 

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

Disabled &amp; Readonly 

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

Real-World Example

A simple login form combining inputs with a button. 

1<div class="max-w-sm space-y-4">
2    <x-bt-input label="Email" icon-start="envelope" type="email" placeholder="you@example.com" />
3    <x-bt-input label="Password" type="password" placeholder="Enter password" />
4    <x-bt-button solid blue class="w-full">Sign In</x-bt-button>
5</div>

Configuration

Override the default color, size, and mode globally.

Config File 

1// config/beartropyui.php
2'component_defaults' => [
3    'input' => [
4        'color' => env('BEARTROPY_UI_INPUT_COLOR', 'primary'),
5        'size' => env('BEARTROPY_UI_INPUT_SIZE', 'md'),
6        'outline' => env('BEARTROPY_UI_INPUT_OUTLINE', true),
7    ],
8],

Slots

Slot Description
start
Content rendered at the left inside the input. Used for buttons, selects, icons, or custom HTML. Chrome is automatically stripped.
end
Content rendered at the right side of the input. Works alongside built-in controls (clear, copy, password toggle).

Props

Prop Type Default Description
label
string|null null
Label text displayed above the input.
placeholder
string|null null
Placeholder text shown when the input is empty.
type
string text
HTML input type: text, email, password, number, url, tel, search, etc. Password type auto-shows an eye toggle.
value
mixed null
Initial input value.
color
string|null config default
Color preset name. The primary color is a neutral gray with beartropy focus ring.
size
string|null md
Size preset: xs, sm, md, lg, xl.
iconStart
string|null null
Icon name at the start of the input.
iconEnd
string|null null
Icon name at the end of the input.
clearable
bool true
Show clear button when input has a value.
copyButton
bool false
Show copy-to-clipboard button.
help
string|null null
Help text below the input.
hint
string|null null
Alias for help. help takes precedence.
spinner
bool true
Show loading spinner during Livewire actions.
customError
mixed null
Custom error message (bypasses the validation error bag).
disabled
bool false
Disables the input.
readonly
bool false
Makes the input read-only. The value can be selected and copied but not edited.
Code highlighting provided by Torchlight
Beartropy Logo

© 2026 Beartropy. All rights reserved.

Provided as-is, without warranty. Use at your own risk.