Input

Plain text-entry field based on the Figma Input section, node 894:2558. Use Combobox when an editable field opens selectable suggestions.

Default

Nome

Support Text

0/30 Caracteres

Nome

Support Text

States

Nome

Support Text

Nome

Support Text

Nome

Support Text

Validation

Nome

Value accepted

Nome

Review this value

Nome

Review this value

Invalid state remains visible while the field is focused. The application or runtime owns validation and removes aria-invalid="true" or .sui-field--error when the value is corrected.

Visualize

Nome

Dark Theme

Nome

Support Text

Nome

Review this value

Nome

CSS API

Use .sui-field for labels, support text, and state; use .sui-input for the visual shell and .sui-input__control for the native input. A trailing angle-down indicates Combobox behavior and must not be added to a plain Input.

<div class="sui-field sui-field--error">
  <label class="sui-field__label" for="email">Email</label>
  <div class="sui-input">
    <input class="sui-input__control" id="email" aria-invalid="true">
  </div>
  <p class="sui-field__support">Review this value</p>
</div>