Text Area
Usage notes
Text areas are text boxes that allow users to input custom text entries with a keyboard. Various decorations can be displayed around the field to communicate the entry requirements.
Default
Toggle markup
<textarea is="coral-textarea" aria-label="text input"></textarea>
Placeholder
Toggle markup
<textarea is="coral-textarea" placeholder="Placeholder" aria-label="text input"></textarea>
Disabled
Toggle markup
<textarea is="coral-textarea" disabled="" aria-label="text input"></textarea>
Invalid
Toggle markup
<textarea is="coral-textarea" invalid="" aria-label="text input"></textarea>
Name
Toggle markup
<textarea is="coral-textarea" name="textarea_1" aria-label="text input"></textarea>
ReadOnly
Toggle markup
<textarea is="coral-textarea" readonly="" aria-label="text input"></textarea>
Required
Toggle markup
<textarea is="coral-textarea" required="" aria-label="text input"></textarea>
Value
Toggle markup
<textarea is="coral-textarea" aria-label="text input">Initial Content</textarea>
Quiet variant
Toggle markup
<textarea is="coral-textarea" placeholder="Enter your name" variant="quiet" aria-label="text input"></textarea>
Form Field
Toggle markup
<form class="coral-Form coral-Form--vertical" style="max-width:300px;">
<label id="label" class="coral-FieldLabel">Label</label>
<textarea is="coral-textarea" class="coral-Form-field" labelledby="label"></textarea>
</form>