Textarea

Types

<TextField textarea="true"  label="Regular" />
<TextField textarea="true"  label="Regular" placeholder="Placeholder" />
<TextField textarea="true"  label="Solo" solo="true" />
<TextField textarea="true"  label="Solo" placeholder="Placeholder" solo="true" />
<TextField textarea="true"  label="Filled" filled="true" />
<TextField textarea="true"  label="Filled" placeholder="Placeholder" filled="true" />
<TextField textarea="true"  label="Outlined" outlined="true" />
<TextField textarea="true"  label="First Name" placeholder="Placeholder" outlined="true" />

Auto grow

<TextField textarea="true" label="Main input" autoGrow="true"
    value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through." />

Rows

<TextField textarea="true" label="Two rows" rows="2"
    value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through." />

No resize

<TextField textarea="true" label="Main input" noResize="true"
    value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through." />

Hint

For example, Twitter or Facebook
<TextField textarea="true"  label="Website or social profile link" hint="For example, Twitter or Facebook" />
<TextField textarea="true"  label="Website or social profile link" hint="For example, Twitter or Facebook" persistentHint="true" outlined="true" />

Clearable

For example, Twitter or Facebook
<TextField textarea="true"  label="Website or social profile link" clearable="true" />
<TextField textarea="true"  label="Website or social profile link" hint="For example, Twitter or Facebook"
    placeholder="You website here" outlined="true" persistentHint="true" clearable="true"
    value="https://viewi.net" />

Counter

0 / 25
2 / 5
<TextField textarea="true"  label="Website or social profile link" filled="true" counter="25" />
<TextField textarea="true"  label="Website or social profile link" hint="This field counts words instead of characters"
    counter="5" solo="true" counterValue="{fn (?string $value) => count(explode(' ', $value ?? ''))}"
    value="Preliminary report" />

Validation

Has validation rules
50 / 25
For example, Twitter or Facebook
17 / 25
function getValidationRules(): array
{
    return [
        'max' => fn (?string $value) => strlen($value ?? '') <= 25 || 'Max 25 characters',
        'required' => fn (?string $value) => !!$value || 'This field is required'
    ];
}
...
<TextField textarea="true"  label="Website or social profile link" counter="25" rules="{getValidationRules()}"
    hint="Has validation rules" persistentHint="true"
    value="California is a state in the western United States" />
<TextField textarea="true"  label="Website or social profile link" hint="For example, Twitter or Facebook"
    placeholder="You website here" outlined="true" persistentHint="true" clearable="true" counter="25"
    rules="{getValidationRules()}" value="https://viewi.net" />

Dense

<TextField textarea="true"  label="Regular" dense="true" />
<TextField textarea="true"  label="First Name" placeholder="Placeholder" outlined="true" dense="true" />

Disabled & readonly

<TextField textarea="true"  label="Regular" disabled="true" value="John Doe" />
<TextField textarea="true"  label="Regular" readonly="true" value="John Doe" />

Hide details

<TextField textarea="true"  label="Main input" rules="{getValidationRules()}" hideDetails="auto" />
<TextField textarea="true"  label="Another input" />

Shaped

<TextField textarea="true"  label="Main input" outlined="true" shaped="true" />
<TextField textarea="true"  label="Another input" filled="true" shaped="true" />

Icons: prepend

<TextField textarea="true"  label="Prepend" prependIcon="mdi-map-marker" />
<TextField textarea="true"  label="Prepend inner" prependInnerIcon="mdi-map-marker" />

Icons: append

<TextField textarea="true"  label="Append" solo="true" appendIcon="mdi-map-marker" />
<TextField textarea="true"  label="Append outer" solo="true" appendOuterIcon="mdi-map-marker" />

Prefixes and suffixes

$
lbs
@gmail.com
PST
<TextField textarea="true"  label="Amount" value="10.00" prefix="\$"></TextField>
<TextField textarea="true"  label="Weight" value="{28.01}" suffix="lbs"></TextField>
<TextField textarea="true"  label="Email address" value="example" suffix="@gmail.com"></TextField>
<TextField textarea="true"  label="Label Text" value="12:30:00" type="time" suffix="PST"></TextField>