Textarea

• Introduction
• Requirements
• Basic Usage
• Old Values
• Auto Resize
• API Reference
  • props
  • slots
  • config

#Introduction

The textarea component offers an easy way to set up a textarea field for your forms. By simply setting its name attribute it also automatically defines your id and makes sure old values are respected.

#Requirements

If you want to take advantage of the auto-resize functionality of the component, you will need the following installed:

• Alpine.js

See Third-Party Assets on the installation guide for further setup information.

#Basic Usage

The most basic usage of the component exists by setting a name attribute:

<x-textarea name="about" />

By default, a rows attribute will be set for the textarea field as well as an id that allows it to be easily referenced by a label element. Of course, you can overwrite all of these values as well:

<x-textarea name="about" id="about_me" rows="5" />

#Old Values

The textarea component also supports old values that were set. For example, you might want to apply some validation in the backend and make sure the user doesn't lose their input data when you show the form again with the validation errors. Whe re-rendering the form, the textarea component will remember the old value:

<div class="form-text-container ...">
    <textarea name="about" id="about" class="form-input form-text ..." rows="3">
About me text</textarea
    >
</div>

If you are using livewire, the textarea will allow livewire to set the value instead, however.

#Auto Resize

You can have the textarea auto-resize its height based on its content length. This is enabled by default in the config, but you can either disable it there or on a per-element basis with the autoResize prop:

<x-textarea :auto-resize="false" />

Behind-the-scenes, the component will make use of our custom x-textarea-resize directive to handle automatically resizing the textarea for you.

#API Reference

#props

prop	description
name	Name of the textarea
id	Id of the input. Defaults to name.
type	Type of input. Defaults to text
value	Value of the input. Gets omitted if wire:model or x-model is present
containerClass	Defines a CSS class to apply to the container of the input
size	Define a size for the textarea. Default size is md
showErrors	If a validation error is present for the input, it will show the error state on the input
extraAttributes	Pass an array of HTML attributes to render on the textarea
leadingAddon	Render text on the left of the textarea
leadingIcon	Render an icon on the left of the textarea
inlineAddon	Render text inside the textarea on the left
trailingAddon	Render text on the right of the textarea
trailingInlineAddon	Render text inside the textarea on the right
trailingIcon	Render an icon on the right of the textarea
autoResize	Resize the textarea automatically as the user types into it. Defaults to config value.

#slots

slot	description
before	Render HTML before the textarea and/or leading addons
after	Render HTML after the textarea and/or trailing addons
leadingAddon	Render text on the left of the textarea
leadingIcon	Render an icon on the left of the textarea
inlineAddon	Render text inside the textarea on the left
trailingAddon	Render text on the right of the textarea
trailingInlineAddon	Render text inside the textarea on the right
trailingIcon	Render an icon on the right of the textarea

#config

The following configuration keys and values can be adjusted for common default behavior you may want for the textarea element.

'defaults' => [
    'global' => [
        // Show error states by default.
        'show_errors' => true,
    ],

    'input' => [
        // Supported: 'sm', 'md', 'lg'
        // Applies to all input types except for checkbox/radios and custom select.
        'size' => 'md',

        // Classes applied by default to input parent div.
        // Will also apply to select.
        'container_class' => null,

        // Base input classes applied by default.
        'input_class' => null,
    ],

    'textarea' => [
        // How many rows should the textarea have by default.
        'rows' => 3,

        // Automatically resize the textarea based on content length.
        'auto_resize' => true,
    ],
],