TextareaImproved in 5.17+
A multi-line text input field. The field.type property value is textarea (for conditionals).
Settings
- Can specify the number of rows the textarea should have.
- Auto GrowNew in 5.17+
- Automatically adjusts the field's height to fit its contents. Disabled by default.
- Maximum HeightNew in 5.17+
- Sets the maximum height in pixels before the field scrolls. Available when Auto Grow is enabled; leave blank for no limit.
- Show Character CountNew in 5.17+
- Displays a live character count below the field. If a maximum length is set, the count also shows that limit. Disabled by default.
Styling & Customization
Customize the Character CountNew in 5.17+
Set the normal and over-limit colors using CSS properties:
.freeform-form {
--ff-character-count-color: #6b7280;
--ff-character-count-error: #dc3545;
}
Target .freeform-character-count to adjust its appearance:
.freeform-character-count {
text-align: start;
font-size: 0.8125rem;
margin-top: 0.375rem;
}
The default messages {count} characters and {count} / {limit} characters are translatable. Manually rendered fields can provide custom wording through input attributes:
<textarea
name="message"
maxlength="500"
data-freeform-character-count
data-character-count-message="{count} characters entered"
data-character-count-limit-message="{count} of {limit} characters"
></textarea>
Keep {count} and {limit} as placeholders; Freeform replaces them with the current values. The over-limit color applies when the count exceeds the maximum, rather than when it reaches it.
Templating
| Property | Description |
|---|---|
field.browserAutofill | The configured HTML autocomplete value. An empty string means use the browser default. |
field.showCharacterCount | Whether the live character count is enabled. |
field.characterCountMessages | An object containing the translated count and limit message formats, including their {count} and {limit} placeholders. |
field.autoGrow | Whether the textarea automatically grows to fit its contents. |
field.autoGrowMaxHeight | The maximum automatic height in pixels, or null when no limit is configured. |
Use field.render() or field.renderInput() to generate the attributes needed for character counting and automatic height adjustment.