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
<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
<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
50 / 25
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>