Inputs

Textarea

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.

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.

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" />

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.

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.

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.
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

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,
    ],
],
Previous
Input
Caught a mistake? Suggest an edit on GitHub