Inputs
Components / Atoms
Base
Base help.
Disabled base.
Focused base.
Tab focused base.
Text required.
Text
Text help.
Disabled text.
Focused text.
Tab focused text.
Text required.
Search
Search help.
Disabled search.
Focused search.
Tab focused search.
Text required.
Email help.
Disabled email.
Focused email.
Tab focused email.
Text required.
Url
Url help.
Disabled url.
Focused url.
Tab focused url.
Text required.
Tel
Tel help.
Disabled tel.
Focused tel.
Tab focused tel.
Text required.
Password
Password help.
Disabled password.
Focused password.
Tab focused password.
Text required.
Number
Number help.
Disabled number.
Focused number.
Tab focused number.
Text required.
DateTime
DateTime help.
Disabled datetime.
Focused datetime.
Tab focused datetime.
Text required.
Date
Date help.
Disabled date.
Focused date.
Tab focused date.
Text required.
Month
Month help.
Disabled month.
Focused month.
Tab focused month.
Text required.
Week
Week help.
Disabled week.
Focused week.
Tab focused week.
Text required.
Time
Time help.
Disabled time.
Focused time.
Tab focused time.
Text required.
Hidden
Hidden help.
Disabled hidden.
Focused hidden.
Tab focused hidden.
Text required.
Smallest
Smallest help.
Disabled smallest.
Focused smallest.
Tab focused smallest.
Text required.
Smaller
Smaller help.
Disabled smaller.
Focused smaller.
Tab focused smaller.
Text required.
Small
Small help.
Disabled small.
Focused small.
Tab focused small.
Text required.
Medium
Medium help.
Disabled medium.
Focused medium.
Tab focused medium.
Text required.
Large
Large help.
Disabled large.
Focused large.
Tab focused large.
Text required.
Larger
Larger help.
Disabled larger.
Focused larger.
Tab focused larger.
Text required.
Largest
Largest help.
Disabled largest.
Focused largest.
Tab focused largest.
Text required.
Provide compact visual boxes for users to enter data and information. Likely the most heavily used component in the entire app.
For proper styling, use the input class in addition to one of the many type attributes:
textsearchemailurlnumberemailpasswordtimeetc.
Additionally, use disabled to restrict the user from interacting with the input.
If you also want a helper on your input, use <p class="input--help">Help text here.</p>