Installation Link
Copy the following to the <head>of your HTML
<link rel="stylesheet" href="https://design-with-ira.netlify.app/installationLinks/input.css">
Inputs are used to display get data from the user. To implement this functionality, wrap the
input element. On the wrapper, add the form-item class. To the <input
type="text"> tag, give the class form-input.
Note: Add the form-input class only to text inputs and not to radio buttons, checkboxes, range slider etc.
Additional Classes
All the form-items (wrappers) can be wrapped inside a <form> tag, and this form
tag can contain the class form
Status Classes for Wrapper
These classes are used to change the color of the bottom border. This can be used for input validation. By default, the color of the status is status-plain-outline.
status-plain-outlinestatus-info-outlinestatus-warning-outlinestatus-error-outlinestatus-success-outline
To adjust the color of any of the above status classes, in your stylesheet do
:root {
--color-status-success: <color>;
--color-inverse-status-success: <color>;
}
.
This will change the the color wherever you use the status class, that is, in status-warning-outline (borders),
status-warning-bg (bacground), and status-warning (text) classes. The inverse
--color-inverse-status-warning property is used to provide appropriate text color against the status
background.