BladeTail UI

home
v2 Docs
Livewire Data-table

Input

Blade component for form input.

The form input with basic style and three different sizes! You can also use default HTML attributes in this component!


Basic

Simple input!

<x-input placeholder="Type something..." />

Result



Label and Help text

Simple input with label and help text!

<x-input
    label="Name"
    help="Type your full name!"
    placeholder="Type something..." />

Result



Type your full name!


Sizes

Three sizes: sm,md,xl

<x-input sm placeholder="Type something..." />
<x-input md placeholder="Type something..." />
<x-input xl placeholder="Type something..." />

Result





Types

Two types: warning, error.

<x-input md warning placeholder="Type something..." />
<x-input md error placeholder="Type something..." />

Result




Wrapper and label classes

You can place css classes for input wrapper div with wrapper property and place classes for label with label-class property

<x-input md
    wrapper="bg-pink-200 rounded shadow p-4"
    label ="Full Name"
    label-class="text-pink-800"
    placeholder="Type something..." />

Result




Other attributes

You can place default and other attributes in this component 

<x-input md
    wire:modal="name"
    placeholder="Type something..." />
<x-input md
    onclick="tosomething()"
    placeholder="Type something..." />
Home
Livewire DataTable
blog

© 2021, BladeTail-UI.

Made with by Deva

Build with Laravel, TailwindCSS, Livewire and AlpineJS