https://framer.com/m/TextArea-cJjB.js

Io / UI Basics / TextArea

TextArea

TextArea is a multi-line input that grows with its content and fires trigger events when the author types @, # or /. Use it for composers and comment fields rather than a plain form input.

Interactiveauto-grow@ # / triggers9 events

Examples

Live specimens for every control the component exposes.

Default

One row to start, growing to ten as the author types. The placeholder advertises the trigger characters.

Placeholder

placeholder is the only copy the component owns — everything else comes from the value the author types.

prompt

trigger hint

Rows

minRows sets the resting height and maxRows the ceiling before the field scrolls internally.

minRows 1

minRows 3

Type size

fontSize is a pixel value on the field itself, so a composer can sit at a different step from the surrounding copy.

14px

16px

20px

Colour and shape

accentColor drives the focus ring and the trigger menu. background, textColor and radius take theme tokens.

field surface

warning accent

Props

The controls exposed on the instance panel.

PropTypeBehaviour
placeholderstringEmpty-state copy. Use it to advertise the trigger characters.
textValuestringThe current value. Bind it to a variable to read the field.
minRowsnumberResting height in rows.
maxRowsnumberRow ceiling before the field scrolls internally.
fontSizenumberType size in pixels.
paddingpaddingInner padding of the field.
radiusnumberCorner radius.
backgroundcolorField fill. Use Field/field-background.
textColorcolorTyped text colour.
accentColorcolorFocus ring and trigger-menu accent.
borderborderField outline.
autoFocusbooleanFocuses the field on mount.
usersobjectThe list backing the @ mention menu.
tagsobjectThe list backing the # tag menu.
onValueChangeeventFires on every keystroke.
onValueNulleventFires when the field is emptied.
submiteventFires on the submit key.
onKeyword1FireeventFires when the first trigger character is used.
onKeyword2FireeventFires when the second trigger character is used.
onFocusedeventFires on focus.
onBlurredeventFires on blur.
PropTypeBehaviour
placeholderstringEmpty-state copy. Use it to advertise the trigger characters.
textValuestringThe current value. Bind it to a variable to read the field.
minRowsnumberResting height in rows.
maxRowsnumberRow ceiling before the field scrolls internally.
fontSizenumberType size in pixels.
paddingpaddingInner padding of the field.
radiusnumberCorner radius.
backgroundcolorField fill. Use Field/field-background.
textColorcolorTyped text colour.
accentColorcolorFocus ring and trigger-menu accent.
borderborderField outline.
autoFocusbooleanFocuses the field on mount.
usersobjectThe list backing the @ mention menu.
tagsobjectThe list backing the # tag menu.
onValueChangeeventFires on every keystroke.
onValueNulleventFires when the field is emptied.
submiteventFires on the submit key.
onKeyword1FireeventFires when the first trigger character is used.
onKeyword2FireeventFires when the second trigger character is used.
onFocusedeventFires on focus.
onBlurredeventFires on blur.

Usage

Guidance carried over from the component definition.

Reach for TextArea

A composer or comment field needs to grow with its content.

Typing @ or # should open a mention or tag menu.

Keystrokes, submit, focus and blur need to drive other state.

The field must pick up the theme accent on focus.

Reach for something else

A single-line value is enough — use a plain form input.

The field is part of a native form submission.

Rich text with formatting marks is required — use MarkdownNext.

Io — UI Basics

Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.

io

An experiment in what a design system becomes when AI can consume it.

© 2026 io

Contact me

Create a free website with Framer, the website builder loved by startups, designers and agencies.