Text

This is by far the most used and most configurable input of them all! It can be used to receive simple String inputs, numeric values, time values, and more. This component is especially useful with the Validation API to turn String values into whatever you want.

This is the most basic form of this component:

Basic

Name

Notice it always has a label (NAME in this case), enforcing good practices. It can also optionally have a placeholder, an input mask, extra elements, word or letter counters, and more.

This same component can be rendered as a textarea for longer texts:

Text area

Bio

edit.input_counter

But always think if you shouldn't use the RichText editor instead.

Some important states are the disabled state and an errored state:

Disabled

Disabled input

With error

Input with error

Something wrong happened

Try typing into the two following inputs, and see how the input mask works! The currency input also shows an example of an extra element displayed on top of the input.

With currency

Enter an amount

With mask

Enter a brazilian phone number

We can also wrap default browser implementations for different input elements. These will look different depending on the browser you're using, but will (hopefully) provide a nice and standard user experience to fill them out. Here's an example for a time input:

Time input

Enter a time