Forms Documentation

Appearance

Textarea ​

The Textarea field renders a multi-line native text control.

Basic Usage ​

Example
php
use InertiaUI\Forms\Fields\Textarea;

Textarea::make('bio');

The frontend renders three rows by default. The serialized rows value remains null, so this fallback may evolve without changing form payloads.

Rows and Columns ​

Set native row and column hints:

Example
php
Textarea::make('bio')->rows(6);
Textarea::make('code')->cols(80);
Textarea::make('notes')->rows(8)->cols(60);

Both methods accept null to clear the attribute. rows() is ignored while auto-resize is enabled. cols() remains a native hint while package styles keep the control full width.

Auto-Resize ​

Grow the textarea with its content:

Example
php
Textarea::make('bio')
    ->autoResize()
    ->minHeight(100)
    ->maxHeight(400);

autoResize() measures the content on mount and after value changes. The frontend uses an 80 pixel minimum unless minHeight() is set. maxHeight() caps growth and allows the textarea to scroll. Heights affect layout only and do not add validation rules.

Character Count ​

Show the current string length below the textarea:

Example
51 / 500
php
Textarea::make('bio')
    ->maxLength(500)
    ->showCharacterCount();

The counter is visual and defaults to off. Pair it with maxLength() to show current / maximum. The native maxlength attribute guides the browser, while the generated Laravel max rule remains the server-side contract.

Length, Placeholder, and Focus ​

php
Textarea::make('description')
    ->minLength(10)
    ->maxLength(1000)
    ->placeholder('Tell us about yourself...')
    ->autofocus();

minLength() and maxLength() set native attributes and add matching Laravel rules. Passing null clears a generated limit and rule. placeholder(null) clears the text. autofocus(false) turns the native autofocus attribute off.

Textarea also supports the shared visibility, authorization, layout, help, label, class, and part-class APIs described in Conditional Visibility, Authorization, Validation, and Styling.

Using the Component Directly ​

You may render Textarea with local state, or pass serialized field props during manual form rendering.

vue
<script setup lang="ts">
import { ref } from 'vue'
import { Textarea } from '@inertiaui/form-vue/components'

const summary = ref('Outline the launch plan for the customer team.')
const notes = ref('Read-only handoff notes for support.')

const trackBlur = () => {}
</script>

<template>
    <div class="grid gap-4">
        <Textarea
            v-model="summary"
            id="launch-summary"
            name="summary"
            label="Launch summary"
            help="Keep the brief under 500 characters."
            placeholder="Summarize the plan..."
            :min-length="20"
            :max-length="500"
            required
            autofocus
            auto-resize
            :min-height="120"
            :max-height="260"
            show-character-count
            data-testid="launch-summary"
            @blur="trackBlur"
        />

        <Textarea
            v-model="notes"
            name="handoff_notes"
            label="Handoff notes"
            :rows="6"
            :cols="80"
            readonly
        />
    </div>
</template>
tsx
import { useState } from 'react'
import { Textarea } from '@inertiaui/form-react/components'

export function LaunchNotes() {
    const [summary, setSummary] = useState('Outline the launch plan for the customer team.')
    const [notes, setNotes] = useState('Read-only handoff notes for support.')

    const trackBlur = () => {}

    return (
        <div className="grid gap-4">
            <Textarea
                value={summary}
                onValueChange={setSummary}
                id="launch-summary"
                name="summary"
                label="Launch summary"
                help="Keep the brief under 500 characters."
                placeholder="Summarize the plan..."
                minLength={20}
                maxLength={500}
                required
                autofocus
                autoResize
                minHeight={120}
                maxHeight={260}
                showCharacterCount
                data-testid="launch-summary"
                onBlur={trackBlur}
            />

            <Textarea
                value={notes}
                onValueChange={setNotes}
                name="handoff_notes"
                label="Handoff notes"
                rows={6}
                cols={80}
                readonly
            />
        </div>
    )
}

Vue uses v-model. React uses controlled value plus onValueChange. Native attributes and listeners target the underlying <textarea>; see Native Attributes And Events.