• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Text Field

Component status
Verified
Last releasedOctober 20, 2020
Current version@spectrum-css/textfield@3.0.0-beta.5

Usage notes


A single-line text field (aka textfield)

Variants


Standard
Verified

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

Disabled
Verified

Show markup
<div class="spectrum-Textfield is-disabled">
  <input type="text" placeholder="Enter your name" name="field" value="" class="spectrum-Textfield-input" disabled>
</div>

Valid
Verified

Show markup
<div class="spectrum-Textfield is-valid">
  <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
  </svg>
  <input type="text" placeholder="Enter your name" name="field" value="A valid input" class="spectrum-Textfield-input" pattern="[\w\s]+" required>
</div>

Valid (disabled)
Verified

Show markup
<div class="spectrum-Textfield is-valid is-disabled">
  <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
  </svg>
  <input type="text" placeholder="Enter your name" name="field" value="A valid input" class="spectrum-Textfield-input" pattern="[\w\s]+" required disabled>
</div>

Invalid
Verified

Show markup
<div class="spectrum-Textfield is-invalid">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertMedium" />
  </svg>
  <input type="text" placeholder="Enter your name" name="field" value="Invalid input" class="spectrum-Textfield-input" pattern="[\d]+" required>
</div>

Invalid (disabled)
Verified

Show markup
<div class="spectrum-Textfield is-invalid is-disabled">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertMedium" />
  </svg>
  <input type="text" placeholder="Enter your name" name="field" value="Invalid input" class="spectrum-Textfield-input" disabled>
</div>

Focused
Verified

Show markup
<div class="spectrum-Textfield is-focused">
  <input type="text" placeholder="Enter your name" name="field" value="" class="spectrum-Textfield-input">
</div>

Keyboard Focused
Verified

Show markup
<div class="spectrum-Textfield is-keyboardFocused">
  <input type="text" placeholder="Enter your name" name="field" value="" class="spectrum-Textfield-input">
</div>

Focused (invalid)
Verified

Show markup
<div class="spectrum-Textfield is-invalid is-focused">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertMedium" />
  </svg>
  <input type="text" placeholder="Enter your name" name="field" value="Invalid input" class="spectrum-Textfield-input" pattern="[\d]+" required>
</div>

Keyboard Focused (invalid)
Verified

Show markup
<div class="spectrum-Textfield is-invalid is-keyboardFocused">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertMedium" />
  </svg>
  <input type="text" placeholder="Enter your name" name="field" value="Invalid input" class="spectrum-Textfield-input" pattern="[\d]+" required>
</div>

Quiet
Verified

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

Quiet Disabled
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--quiet is-disabled">
  <input type="text" placeholder="Enter your name" name="field" value="" class="spectrum-Textfield-input" disabled>
</div>

Quiet Valid
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--quiet is-valid">
  <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
  </svg>
  <input type="text" placeholder="Enter your name" name="field" value="A valid input" class="spectrum-Textfield-input" pattern="[\w\s]+" required>
</div>

Quiet Valid (disabled)
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--quiet is-valid is-disabled">
  <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
  </svg>
  <input type="text" placeholder="Enter your name" name="field" value="A valid input" class="spectrum-Textfield-input" pattern="[\w\s]+" required disabled>
</div>

Quiet Invalid
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--quiet is-invalid">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertMedium" />
  </svg>
  <input type="text" placeholder="Enter your name" name="field" value="Invalid input" class="spectrum-Textfield-input" pattern="[\d]+" required>
</div>

Quiet Invalid (disabled)
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--quiet is-invalid is-disabled">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertMedium" />
  </svg>
  <input type="text" placeholder="Enter your name" name="field" value="Invalid input" class="spectrum-Textfield-input" disabled>
</div>

Quiet Focused
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--quiet is-focused">
  <input type="text" placeholder="Enter your name" name="field" value="" class="spectrum-Textfield-input">
</div>

Quiet Keyboard Focused
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--quiet is-keyboardFocused">
  <input type="text" placeholder="Enter your name" name="field" value="" class="spectrum-Textfield-input">
</div>

Quiet Focused (invalid)
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--quiet is-invalid is-focused">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertMedium" />
  </svg>
  <input type="text" placeholder="Enter your name" name="field" value="Invalid input" class="spectrum-Textfield-input" pattern="[\d]+" required>
</div>

Quiet Keyboard Focused (invalid)
Verified

Show markup
<div class="spectrum-Textfield spectrum-Textfield--quiet is-invalid is-keyboardFocused">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertMedium" />
  </svg>
  <input type="text" placeholder="Enter your name" name="field" value="Invalid input" class="spectrum-Textfield-input" pattern="[\d]+" required>
</div>

Migration Guide


Composition

As of 3.0.0, Textfield is now composed the same way a DecoratedTextfield was preivously.

That is, the outer element div.spectrum-Textfield contains a input.spectrum-Textfield-input.

Icons

Icons are now added as SVGs, with svg.spectrum-Textfield-icon for workflow icons, and svg.spectrum-Textfield-validationIcon for UI icons.

The <svg> element should appear before the <input> element.

Indicating validity and focus

Validity and focus must be bubbled up to the parent so adjacent siblings can be styled.

Thus, implementations must add the following classes in the following situations:

  • .spectrum-Textfield.is-focused - when the input is focused with the mouse
  • .spectrum-Textfield.is-keyboardFocused - when the input is focused with the keyboard
  • .spectrum-Textfield.is-valid - when the input has an explicit valid state
  • .spectrum-Textfield.is-invalid - when the input has an explicit invalid state

Removal of :valid and :invalid

Textfield no longer supports the CSS pseudo selectors :invalid and :value.

Using these selectors is an anti-pattern that complicates form validation techniques by making inputs appear invalid immediately, not after use interaction. Please apply .is-valid and .is-invalid to the outer div.spectrum-Textfield element instead.

Variants

Variants must be applied to the parent element, i.e. .spectrum-Textfield.spectrum-Textfield--quiet or .spectrum-Textfield.spectrum-Textfield--multiline. The <input> will be styled appropriately.