1. Components
  2. text-area

TextArea

A multi-line input field designed for longer text entries, providing ample space for detailed input.

PresetUI FormUnoCSS Preset Form 
<div class="space-y-4 wfull">
    <textarea placeholder="Your email here" class="ui-form-base ui-form-input ui-form-input-md b b-border-strong/90 bg-bg rd-lg text-fg"></textarea>
    <textarea placeholder="Your email here" class="ui-form-base ui-form-input ui-form-input-md bg-bg bg-bg-surface rd-lg b-transparent text-fg"></textarea>
</div>

No Resize 

<div class="space-y-4 wfull">
    <textarea placeholder="Your email here" class="ui-form-base ui-form-input ui-form-input-md b b-border-strong/90 bg-bg rd-lg text-fg resize-none"></textarea>
</div>

Auto Resize 

<div class="wfull">
    <textarea data-fx-autoresize placeholder="Your message" class="ui-form-base ui-form-input ui-form-input-md b b-border-strong/90 bg-bg rd-lg text-fg"></textarea>
</div>
AutoResize Text Area requires JS, by default we’re using @flexilla/auto-resize-area component, else you can skip this step if you’ve already @flexilla/flexilla.

Add JS

  1. Installation 

    npm i @flexilla/auto-resize-area

  2. Usage

    You can globaly init all AutoResizeTextArea or init separately every Text Area Element 
    import { AutoResizeTextArea } from "@flexilla/auto-resize-area"
// init AutoResizeTextArea for all Element with data-fx-autoresize attribute
AutoResizeTextArea.autoInit()

With Label 

<div class="space-y-2">
    <label for="message" class="w-max text-sm text-fg-muted">Your Message</label>
    <textarea id="message" name="message" placeholder="Tell us your ...." class="ui-form-base ui-form-input ui-form-input-md b b-border-strong/90 bg-bg rd-lg text-fg"></textarea>
</div>
Prev
Tooltip

Information for user on hover.

Next
On this page