Playground: DEMO LINK
Labels can be placed either on top or on the side. Top labels are the default and are recommended because they work better with long copy, localization, and responsive layouts. Side labels are most useful when vertical space is limited.
The value shows a user’s entered text.
Text fields come in four different sizes: extra small (xs), medium (md), large (lr), and extra-large (xl). The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.
By default, text fields have a visible border. This style works best in a dense array of controls where the border helps to separate the input from the surrounding container, or to give visibility to isolated buttons.
Alternatively, quiet text fields can have no visible border. This style works best when a clear layout (vertical stack, table, grid) makes it easy to parse. Too many quiet components in a small space can be hard to read.
Text fields can be marked as optional or required, depending on the situation. For required text fields, there are two styling options: a “(required)” label or an asterisk (*).
Optional text fields are either denoted with text added to the end of the label — “(optional)” — or other custom text, or have no indication at all.
Text fields may contain an information icon to provide details about the functionality or information for the user.
A text field can be marked as having an issue to indicate that a value needs to be entered in order to proceed or that a value that was entered is invalid.
A text field in a disabled state shows that an input field exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that a field may become available later.
A text field can have help text below the field to give extra context or instruction about what a user should input in the field. The help text area has two options: a description and an error message.
The description communicates a hint or helpful information, such as specific requirements for correctly filling out the field.
The error message communicates an error for when the field requirements aren’t met, prompting a user to adjust what they had originally input.
Optionally, you can use the icons to choose from on the left side of the input. There are four options of icons that can emphasize the purpose of your text field, such as "(user)", "(search)", "(password)" and "(email)"
Optionally, you can use icon "(help)" on the right side of the input
Also, optionally, you can use the "(Cmnd+K)" icon on the right side of the input
- Typescript, JavaScript (ES6)
- React
- HTML5
- CSS3
- SCSS
- Git
- Github
Dmytro Koriahin - @Dmytro Koriahin - dmytro.koriahin@gmail.com
Project Link: https://github.com/Follder/react_input-lib
Created as a test project for Rubik UI Kit