Wirestrap is still in active development

This project is pre-1.0 and may introduce breaking changes at any time without prior notice.

Input

Text input with label, floating label variant, icon support, password toggle, and Livewire validation feedback. The id attribute is auto-resolved from wire:model when omitted.

Basic usage

Bind with wire:model and pass a label. Any additional HTML attributes are forwarded directly to the <input> element: autocomplete, maxlength, Alpine directives, and so on all work as expected. Add floating for a floating label layout, and icon to place an icon inside the field. Use icon-placement="end" to move it to the trailing side.

Search

<x-wirestrap::input
    wire:model="search"
    label="Search"
    icon="bi-search"
/>

{{-- Floating label --}}
<x-wirestrap::input ... floating />

Icon prop

The icon prop accepts any class string from your preferred icon library, or an array of attributes for full control. Custom icon components are also supported, see icon configuration.

Password

Add password to replace the input type with a show/hide toggle. The type prop is ignored when password is set.

Password

<x-wirestrap::input
    wire:model="password"
    label="Password"
    password
/>

Disabled

Pass disabled to disable the input. You can still set a value for display.

API key

<x-wirestrap::input
    label="API key"
    value="sk-••••••••••••••••"
    disabled
/>

Validation

When wire:model is bound, the input checks $errors for a matching key and applies the invalid class and error message if found. Try submitting an invalid email below.

Email

{{-- Suppress both the invalid class and the error message --}}
<x-wirestrap::input ... :has-validation="false" />

{{-- Keep the invalid class, hide the error message --}}
<x-wirestrap::input ... :has-validation-message="false" />

Props

Global configuration

Most prop defaults can be overridden globally via config/wirestrap.php.

x-wirestrap::input

Prop	Type	Default	Description
`id`	`string\|null`	`null`	Input id. Auto-resolved from wire:model when omitted (dots replaced with dashes).
`label`	`ComponentSlot\|string\|null`	`null`	Label text or slot content. No label element is rendered when null.
`type`	`string`	`'text'`	Input type. Ignored when password is set.
`floating`	`bool`	`false`	Use floating label layout. The placeholder is automatically set to a space character.
`icon`	`string\|array`	`null`	Icon identifier forwarded to the configured icon component.
`icon-placement`	`string`	`'start'`	Icon position: start or end.
`placeholder`	`string\|null`	`null`	Placeholder text. Defaults to a space in floating mode.
`password`	`bool`	`false`	Add a show/hide password toggle button. Overrides the type prop.
`disabled`	`bool`	`false`	Disable the input.
`has-validation-message`	`bool`	`config`	Render the error message below the input.
`has-validation`	`bool`	`config`	Apply the invalid class when the wire:model key has an error.
`default-attributes`	`array`	`config`	Default HTML attributes merged onto the input element.
No results found

⭐ GitHub