Textarea

Sizes

Control the font size and padding using the size attribute.

<c-ui.textarea size="xs" placeholder="Extra small" />
<c-ui.textarea size="sm" placeholder="Small" />
<c-ui.textarea size="md" placeholder="Medium (default)" />
<c-ui.textarea size="lg" placeholder="Large" />
<c-ui.textarea size="xl" placeholder="Extra large" />
<c-ui.textarea size="2xl" placeholder="2XL" />

{% cotton ui.textarea size="xs" placeholder="Extra small" /%}
{% cotton ui.textarea size="sm" placeholder="Small" /%}
{% cotton ui.textarea size="md" placeholder="Medium (default)" /%}
{% cotton ui.textarea size="lg" placeholder="Large" /%}
{% cotton ui.textarea size="xl" placeholder="Extra large" /%}
{% cotton ui.textarea size="2xl" placeholder="2XL" /%}

Height

Control the initial height using the height attribute. This sets a fixed height, which will be overridden if autoresize is used and the content grows.

<c-ui.textarea height="xs" placeholder="Extra small height" />
<c-ui.textarea height="sm" placeholder="Small height" />
<c-ui.textarea height="md" placeholder="Medium height (default)" />
<c-ui.textarea height="lg" placeholder="Large height" />
<c-ui.textarea height="xl" placeholder="Extra large height" />
<c-ui.textarea height="2xl" placeholder="2XL height" />

{% cotton ui.textarea height="xs" placeholder="Extra small height" /%}
{% cotton ui.textarea height="sm" placeholder="Small height" /%}
{% cotton ui.textarea height="md" placeholder="Medium height (default)" /%}
{% cotton ui.textarea height="lg" placeholder="Large height" /%}
{% cotton ui.textarea height="xl" placeholder="Extra large height" /%}
{% cotton ui.textarea height="2xl" placeholder="2XL height" /%}

Autoresize

Use the autoresize attribute to make the textarea automatically adjust its height based on the content. Requires Alpine.js.

<c-ui.textarea autoresize placeholder="Type something long here and the textarea will grow..." />

{% cotton ui.textarea autoresize placeholder="Type something long here and the textarea will grow..." /%}

Non-resizable

Prevent the user from manually resizing the textarea using :resizable="False".

<c-ui.textarea :resizable="False" placeholder="You cannot resize me." />

{% cotton ui.textarea :resizable="False" placeholder="You cannot resize me." /%}

As a field

Give it any field attribute (label, description, error or badge) and the textarea wraps itself in a Field component, giving you the label, helper text and error styling with no extra markup.

Bio

A short description for your profile.

<c-ui.textarea
    label="Bio"
    placeholder="Tell us about yourself..."
    description="A short description for your profile."
/>

{% cotton ui.textarea
    label="Bio"
    placeholder="Tell us about yourself..."
    description="A short description for your profile."
/%}

API Reference

Props

Name	Description	Type	Options	Default
`:autoresize`	Automatically adjusts height to fit content. Requires Alpine.js.	bool	`TrueFalse`	False
`size`	Sets the font size and padding.	str	`xssmmdlgxl2xl`	md
`height`	Sets the initial fixed height. Overridden by autoresize.	str	`xssmmdlgxl2xl`	md
`:resizable`	Allows or prevents manual resizing by the user via CSS.	bool	`TrueFalse`	True
`label`	Shorthand: Automatically wraps the textarea with a label in a field structure.	str	Any text
`description`	Shorthand: Adds helper text before the textarea.	str	Any text
`description_trailing`	Shorthand: Adds helper text after the textarea.	str	Any text
`error`	Shorthand: Field name for Django form error lookup, or explicit error message.	str	Field name or message text
`badge`	Shorthand: Badge text for the label (e.g., 'Required' or 'Optional').	str	Any text
`:form`	Shorthand: Django form instance for automatic error display.	Form	Django form object	None

Slots

Name	Description	Type	Options	Default
`slot (default)`	The initial content/value of the textarea.	—	—

A multi-line text input component.