Text inputs are basic single line text inputs for your application. They are commonly used when building forms.
A text input configuration is divided in 3 different sections. In the first section you can configure it's dimensions, position, responsivity and all of it's arguments.
Responsivityare common to all elements, you can checkout more about how they work here.
Variableargument is useful for binding an input value to a variable of your application.
Accessibility Labelare used to configure how screen readers interact with your application. Other than this default arguments, you can also configure if the input is
Disabled, a input value
Validationand if it has an
The second configuration section let's you change you input styles. You can change it's
Except for the
Inner Padding, you can change the styles based on user interaction. They all have a
Standardstate configuration but you can change styles during
Clickinteractions as well.
The third configuration section let's you change you input
You can customize the acceptable format of each input by using masks
Mask is a optional parameter, so you have to add on the + button
Examples of masks:
(000) 000 - 0000for US phone numbers
aaafor currency codes
And you can also have multiple masks on the same input by writing pipes | between them and the input value will adjust based on text length