Text Area

Demo

<form class="space-y-4 w-full">
    <x-ui.textarea placeholder="Start typing..."/>
    <x-ui.textarea placeholder="Start typing..." no-border class="bg-bg-subtle"/>
</form>

Installation

flexi-cli add text-area

Resize none

<form class="space-y-4 w-full">
    <x-ui.textarea placeholder="Start typing..." resize-none/>
</form>

Auto resize

<form class="space-y-4 w-full">
    <x-ui.textarea placeholder="Start typing..." auto-resize/>
</form>

1. Install Autoresize plugin

   This component require JS. By default we're using our own Interactive Component Library Flexilla . You can install the Alpine Plugin if using Alpine or the vanilla JS version as you need
   1. With Alpine
   Shell

   npm i @flexilla/alpine-autoresize-area

   Add plugin in app.js

   flexilla.js

   import AlpineAutoResize from "@flexilla/alpine-autoresize-area"
   
   Alpine.plugin(AlpineAutoResize)

   2. Without Alpine
   Shell

   npm i @flexilla/alpine-autoresize-area

   Initialize Auto resize in app.js

   flexilla.js

   import { AutoResizeTextArea } from "@flexilla/autoresize-area"
   
   // init Auto resize area for all Element with data-app-auto-resize attribute
   AutoResizeTextArea.autoInit('[data-app-auto-resize]') 

With label

<form class="space-y-4 w-full">
    <x-ui.textarea label="Your message" placeholder="Start typing..." class="h-40"/>
</form>