Displays a form input field or a component that looks like an input field.
<x-portal::input type="email" placeholder="Email" name="email"/>
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
<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" />
<x-portal::input type="email" placeholder="Email" name="email" invalid/>
<x-portal::input type="email" placeholder="Email" name="email" disabled />
<x-portal::input type="text" placeholder="Secret Key" name="secret_key" readonly value="BA7K7QZ511S8Z2K"/>
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"/>
<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"/>
<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>
<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>
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"/>
<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/>
<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>
<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>