Laravel Form Components

Demo: Input

The input component offers an easy way to set up any type of input field for your forms.

Available Demos

Basic Usage

Basic Input

<x-input name="basic-usage-demo" />

Leading Addon

Demo

Source

Input with Leading Addon

https://

<x-input name="leading-addon-demo" 
         leading-addon="https://" 
/>

Inline Addon

Demo

Source

Input with Inline Addon

https://

<x-input name="inline-addon-demo" 
         inline-addon="https://" 
         inline-addon-padding="pl-16"
/>

Leading Icon

Demo

Source

Input with Leading Icon

<x-input name="leading-icon-demo">
    <x-slot name="leadingIcon">
        <x-heroicon-o-phone />
    </x-slot>
</x-input>

Trailing Addon

Demo

Source

Input with Trailing Addon

USD

<x-input name="trailing-addon-demo" 
         trailing-addon="USD" 
/>

Trailing Icon

Demo

Source

Input with Trailing Icon

<x-input name="trailing-icon-demo">
    <x-slot name="trailingIcon">
        <x-heroicon-s-search />
    </x-slot>
</x-input>

Advanced Usage

Demo

Source

Advanced Usage of Input

USD

<x-input name="advanced-usage-demo" 
         trailing-addon="USD" 
         placeholder="0.00" 
         type="number" 
         step="any" 
         min="0" 
         max="100"
>
    <x-slot name="leadingIcon">
        <x-heroicon-o-currency-dollar />
    </x-slot>
</x-input>