Portal UI : Input

Input

Displays a form input field or a component that looks like an input field.

<x-portal::input type="email" placeholder="Email" name="email"/>

Publishing Component

If you want to customize the components, you can publish them by running the following command :

php artisan vendor:publish --tag=portal-ui:input --force

Type

<x-portal::input type="text" placeholder="Name" name="Name" />
<x-portal::input type="email" placeholder="Email" name="Email" />
<x-portal::input type="number" placeholder="Quantity" name="Quantity" />
<x-portal::input type="password" placeholder="Password" name="Password" />
<x-portal::input type="file" placeholder="Document" name="Document" />

Invalid

<x-portal::input type="email" placeholder="Email" name="email" invalid/>

Disabled

<x-portal::input type="email" placeholder="Email" name="email" disabled />

Read Only

<x-portal::input type="text" placeholder="Secret Key" name="secret_key" readonly value="BA7K7QZ511S8Z2K"/>

Mask

Restrict the formatting of text content for unique cases by using Alpine's mask plugin

<x-portal::input type="text" placeholder="Phone Number" name="phone_number" mask="(999) 999-9999" value="7161234567"/>

Size

<x-portal::input type="email" placeholder="Email" size="sm"/>
<x-portal::input type="email" placeholder="Email"/>
<x-portal::input type="email" placeholder="Email" size="lg"/>
<x-portal::input type="email" placeholder="Email" size="xl"/>

With Label

<div class="grid w-full max-w-sm items-center gap-1.5">
    <x-portal::label htmlFor="file">Email</x-portal::label>
    <x-portal::input type="text" placeholder="Email" name="email" />
</div>

With Button

<div class="flex w-full max-w-sm items-center space-x-2">
    <x-portal::input type="text" placeholder="Email" name="email" />
    <x-portal::button>Subscribe</x-portal::button>
</div>

With Icon

Append or prepend an icon to the inside of a form input by using table icon

<x-portal::input type="email" placeholder="Email" name="email" icon="mail" />
<x-portal::input type="text" placeholder="Credit Card" name="credit_card" icon-right="credit-card"/>

Clearable, copyable, and viewable inputs

<x-portal::input placeholder="Search orders" value="Jack Skellington" clearable/>
<x-portal::input type="password" value="password" viewable/>
<x-portal::input value="FLUX-1234-5678-ABCD-EFGH" readonly copyable/>

Input Group

<x-portal::input.group>
    <x-portal::input type="text" placeholder="Post title" name="post_title" />
    <x-portal::button variant="outline" class="!shadow-none">
        <x-tabler-plus class="h-4.5" />
        New Post
    </x-portal::button>
</x-portal::input.group>

<x-portal::input.group>
    <x-portal::button variant="outline" class="!shadow-none">
        <x-tabler-plus class="h-4.5" />
        New Post
    </x-portal::button>
    <x-portal::input type="text" placeholder="Post title" name="post_title" />
</x-portal::input.group>

Text prefixes and suffixes

https://

.brand.com

<x-portal::input.group>
    <x-portal::input.group-prefix>
        https://
    </x-portal::input.group-prefix>
    <x-portal::input type="text" placeholder="example.com" name="domain" />
</x-portal::input.group>
<br>
<x-portal::input.group>
    <x-portal::input type="text" placeholder="chunky-spaceship" name="domain" />
    <x-portal::input.group-prefix>
        .brand.com
    </x-portal::input.group-prefix>
</x-portal::input.group>