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

Text Field

Component status
Contribution
Last releasedUnreleased
Current version@spectrum-css/textfield@3.0.3-alpha.1
View guidelines
Spectrum website
View repository
GitHub
View package
npm

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-Checkmark100 spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Checkmark100" />
  </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-Checkmark100 spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Checkmark100" />
  </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-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </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-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </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-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </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-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </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-Checkmark100 spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Checkmark100" />
  </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-Checkmark100 spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Checkmark100" />
  </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-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </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-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </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-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </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-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </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.

No results found

Try another search term.