Atlas

Textarea

A multi-line text control that shares the input styling, with a resize handle you can lock down.

<x-atlas::textarea>

The textarea reads the same styling as the input — it adds atlas-input as well as its own class — so a form mixing the two stays even. What it adds on top is control over the resize handle.

Message 
<x-atlas::field>
    <x-atlas::label for="message">Message</x-atlas::label>
    <x-atlas::textarea id="message" name="message" rows="4" placeholder="How can we help?" />
</x-atlas::field>
Preview follows the site's light/dark mode. Open standalone →
The template hard-codes name="textarea" and rows="2" after the merged attributes, so the rendered element carries each twice. Browsers honour the first occurrence, which is yours, so passing name and rows works — but always pass a name, or the fallback silently submits the field as textarea.

Resize

vertical is the default and the safe choice: the field can grow for a long answer without ever widening past its column. Use none in a tight layout where a dragged corner would look broken, and avoid horizontal and both unless you have checked what happens when the user drags past the container.

Vertical Both None 
<x-atlas::field>
    <x-atlas::label for="resize-vertical">Vertical</x-atlas::label>
    <x-atlas::textarea id="resize-vertical" name="resize_vertical" resize="vertical" rows="3" />
</x-atlas::field>

<x-atlas::field>
    <x-atlas::label for="resize-both">Both</x-atlas::label>
    <x-atlas::textarea id="resize-both" name="resize_both" resize="both" rows="3" />
</x-atlas::field>

<x-atlas::field>
    <x-atlas::label for="resize-none">None</x-atlas::label>
    <x-atlas::textarea id="resize-none" name="resize_none" resize="none" rows="3" />
</x-atlas::field>
Preview follows the site's light/dark mode. Open standalone →

Prefilled value

A native textarea takes its value from its content, but Atlas never renders the slot — anything you write between the tags is dropped, and value is not a textarea attribute either. Until the package renders the slot, bind the value with Alpine, or with wire:model if the form is a Livewire component.

Internal note 
<x-atlas::field x-data="{ note: 'Renewal call booked for Thursday. Ask about the extra seats.' }">
    <x-atlas::label for="prefilled">Internal note</x-atlas::label>
    <x-atlas::textarea id="prefilled" name="internal_note" rows="3" x-model="note" />
</x-atlas::field>
Preview follows the site's light/dark mode. Open standalone →

Invalid

invalid behaves exactly as it does on the input: danger border, aria-invalid="true", and no explanation of its own. Put the reason in an error underneath.

Reason for cancelling Tell us why before we close the account. 
<x-atlas::field>
    <x-atlas::label for="cancellation-reason" is-required>Reason for cancelling</x-atlas::label>
    <x-atlas::textarea
        id="cancellation-reason"
        name="cancellation_reason"
        rows="3"
        aria-describedby="cancellation-reason-error"
        invalid
    />
    <x-atlas::error id="cancellation-reason-error">Tell us why before we close the account.</x-atlas::error>
</x-atlas::field>
Preview follows the site's light/dark mode. Open standalone →

In a form

One textarea per form is usually the right number. It signals which question is the open one, and everything above it can stay a single line. 

<x-atlas::fieldset role="group" aria-labelledby="enquiry-legend">
    <x-atlas::legend id="enquiry-legend">Send us an enquiry</x-atlas::legend>

    <x-atlas::field>
        <x-atlas::label for="enquiry-name" is-required>Your name</x-atlas::label>
        <x-atlas::input id="enquiry-name" name="name" type="text" autocomplete="name" required />
    </x-atlas::field>

    <x-atlas::field>
        <x-atlas::label for="enquiry-email" is-required>Email</x-atlas::label>
        <x-atlas::input id="enquiry-email" name="email" type="email" autocomplete="email" required />
    </x-atlas::field>

    <x-atlas::field>
        <x-atlas::label for="enquiry-message" is-required>What do you need?</x-atlas::label>
        <x-atlas::textarea id="enquiry-message" name="message" rows="5" resize="none" required />
    </x-atlas::field>

    <x-atlas::button type="submit">Send enquiry</x-atlas::button>
</x-atlas::fieldset>
Preview follows the site's light/dark mode. Open standalone →

Field

The wrapper that binds a label, a control and an error message into one form row.

Label

The name of a form control, with an optional required marker.

Input

A single-line text control, styled for every input type the browser offers.

Error

The message that explains why a control was rejected, with a warning icon in front of it.

Select

A native select styled with Atlas input tokens, with a disabled placeholder option built in.

Fieldset

A vertical stack that gathers related fields into one group.

Legend

The heading that names a fieldset.

Reference

<x-atlas::textarea>

  • Name
    resize
    Type
    vertical | horizontal | both | none
    Default
    default: vertical
    Description
    Which way the user may drag the resize handle. Maps to the CSS <code>resize</code> property.
  • Name
    invalid
    Type
    bool
    Default
    default: false
    Description
    Draws the danger border and sets <code>aria-invalid="true"</code>. Pair it with an <a href="/components/error">error</a>.