Components
text-area

Text Area

Multi-line text input for longer user descriptions or notes.

Demo

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

Installation

Shell

php artisan flexi: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>

Install Autoresize plugin

This component requires 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
Shell
npm i @flexilla/alpine-autoresize-area

Usage

With Alpine/Livewire

Add plugin in app.js

flexilla.js

import { AutoResizeAreaPlugin } from "./plugins/auto-resize-area";

Alpine.plugin(AutoResizeAreaPlugin)

Without Alpine

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>

References

Composition

Prop	Description
`x-ui.textarea`	The main textarea component

Textarea Props

To configure the textarea component you can use the following props. All props are optional.

Prop	Description
`type` (string)	The textarea type. Default: "text"
`size` (string)	The size of the textarea. Options: "sm", "md", "lg". Default: "md"
`disabled` (boolean)	Whether the textarea is disabled. Default: false
`readonly` (boolean)	Whether the textarea is readonly. Default: false
`label` (string)	The label text for the textarea. Default: null
`variant` (string)	The variant of the textarea. Options: "default", "ghost", "flush", "unstyled". Default: "default"
`labelPosition` (top\|inline)	Position of the label relative to the textarea. Options: "top", "inline". Default: "top"
`labelClass` (string)	Additional CSS classes for the label. Default: ''
`autoResize` (boolean)	Enables automatic height adjustment based on content. Default: false
`class` (string)	Additional CSS classes for the textarea. Default: ''

Edit this page

Select

Customizable dropdow...