Input

Plain CSS implementation of the Figma Input section, node 894:2558.

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.

<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>