sunweb

Textbox

component textbox form-element

Definition


Text inputs enable the user to interact with and input data.
We use them when the application requires long-form content from the user.

c-textbox

Handlebars

Loading...

The icon could be positioned at right as well, unless the textbox is of type "password", in that case the icon will remain in the left, in order to have space for the icon to see/hide the password

The icon and the clear button are optional. Thus, you could use the component without them.

Textbox with value.

Textbox of type password

Handlebars

Loading...

Javascript

Loading...

Textbox with info tooltip

Handlebars

Loading...

Javascript

Loading...

Textbox with password requirement

Handlebars

  • 8 characters or more
  • A number
  • An uppercase
  • A lowercase
Loading...

Javascript

Loading...

States


c-textbox > .is-disabled

The disabled state blocks the users interaction and modifies the appearance to let them know that edition is not possible.

.is-disabled > c-textbox

In some cases, the textbox is not disabled at component level but instead one ancestor is marked as disabled. This is mainly done when loading data to let the users know that the component is not useful at that moment.


c-textbox > .has-success

The success state let the user know that the filled information is correct.


c-textbox > .has-warning

The warning state let the user know that the filled information has an issue.


c-textbox > .has-error

The error state let the user know that the filled information has an error.

Handlebars

Surname is Required
Field cannot be empty
Loading...

Modifiers


c-textbox > .c-textbox--highlighted

The highlighted modifier changes the color when an option is selected.
It is used in contexts when is useful to let the users know that an options is choosen (i.e. search filters or booking steps).