Demo: Input

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

Basic Usage

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

Leading Addon

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

Inline Addon

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

Leading Icon

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

Trailing Addon

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

Trailing Icon

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

Advanced Usage

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>