Text Field

Component status
Verified
Last releasedOctober 8, 2019
Current version@spectrum-css/textfield@2.0.0

Usage notes#


A single-line text field (aka textfield)

Variants#


Standard#
Verified

<input type="text" placeholder="Enter your name" name="field" value="" class="spectrum-Textfield">

<input type="text" placeholder="Enter your name" name="field" value="" class="spectrum-Textfield" disabled>

<input type="text" placeholder="Enter your name" name="field" value="A valid input" class="spectrum-Textfield is-valid" pattern="[\w\s]+" required>

<input type="text" placeholder="Enter your name" name="field" value="A valid input" class="spectrum-Textfield is-valid" pattern="[\w\s]+" required disabled>

<input type="text" placeholder="Enter your name" name="field" value="Not a valid input" class="spectrum-Textfield" pattern="[\d]+" required>

<input type="text" placeholder="Enter your name" name="field" value="Not a valid input" class="spectrum-Textfield is-invalid" disabled>
Show markup

Text Field - Quiet#
Verified

A Spectrum text field - quiet

<input type="text" placeholder="Enter your name" name="field" value="" class="spectrum-Textfield spectrum-Textfield--quiet">

<input type="text" placeholder="Enter your name" name="field" value="" class="spectrum-Textfield spectrum-Textfield--quiet" disabled>

<input type="text" placeholder="Enter your name" name="field" value="A valid input" class="spectrum-Textfield spectrum-Textfield--quiet is-valid" pattern="[\w\s]+" required>

<input type="text" placeholder="Enter your name" name="field" value="A valid input" class="spectrum-Textfield spectrum-Textfield--quiet is-valid" pattern="[\w\s]+" required disabled>

<input type="text" placeholder="Enter your name" name="field" value="Not a valid input" class="spectrum-Textfield spectrum-Textfield--quiet" pattern="[\d]+" required>

<input type="text" placeholder="Enter your name" name="field" value="Not a valid input" class="spectrum-Textfield spectrum-Textfield--quiet is-invalid" disabled>
Show markup