Textarea

Blade component for form textarea.

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


Basic

Simple textarea!

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

Result


Label and Help text

Simple textarea with label and help text!

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

Result


Type your full name!


Sizes

Three sizes: sm,md,xl

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

Result


Types

Two types: warning, error.

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

Result


Wrapper and label classes

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

<x-textarea 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 other attributes in this component

<x-textarea md
    wire:modal="name"
    placeholder="Type something..." />
<x-textarea md
    onclick="tosomething()"
    placeholder="Type something..." />

© 2021, BladeTail-UI.

Made with by Deva