Text Field
Usage notes
Text fields 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
<input type="text" is="coral-textfield" aria-label="text input">
Placeholder
Toggle markup
<input type="text" is="coral-textfield" placeholder="Placeholder" aria-label="text input">
Disabled
Toggle markup
<input type="text" is="coral-textfield" disabled="" aria-label="text input">
Invalid
Toggle markup
<input type="text" is="coral-textfield" invalid="" aria-label="text input">
Name
Toggle markup
<input type="text" is="coral-textfield" name="name" aria-label="text input">
ReadOnly
Toggle markup
<input type="text" is="coral-textfield" readonly="" value="readonly field" aria-label="text input">
Required
Toggle markup
<input type="text" is="coral-textfield" required="" aria-label="text input">
Value
Toggle markup
<input type="text" is="coral-textfield" value="value" aria-label="text input">
Quiet variant
Toggle markup
<input type="text" is="coral-textfield" placeholder="Enter your name" variant="quiet" aria-label="text input">
Form Field
Toggle markup
<form class="coral-Form coral-Form--vertical" style="max-width:300px;">
<label id="label" class="coral-FieldLabel">Label</label>
<input is="coral-textfield" labelledby="label" class="coral-Form-field">
</form>