Input
Semantic HTML input element for text entry.
Structure
The input component uses standard <input> and <textarea> elements for text
entry. For inputs with prefixes or suffixes, wrap them in a <label role="textbox"> element.
The role="textbox" attribute on the label is required for proper styling. The label acts as the
visual input container while the inner input remains invisible and fills the available space. Prefix and suffix
elements can be any HTML (text, icons, etc.).
Examples
Input Types
Different input types can be used for various purposes like email, password, number, etc.
Use the type attribute to specify the input type. Common types include text,
email, password, number, and search.
Prefix and Suffix
Inputs can have prefix or suffix elements like icons, currency symbols, or units using a label wrapper.
Use a <label role="textbox"> wrapper to add prefix or suffix elements. The label styles itself
like an input while the inner input becomes invisible and fills the available space.
Textarea
For multi-line text input, use the <textarea> element.
The <textarea> element accepts the same styling as regular inputs but allows for multiple lines
of text.
States
Inputs can be put in different states to indicate their current status.
The disabled and readonly attributes can be used to control input interactivity.
With Labels
Inputs should typically be paired with labels for accessibility.
Use the <label> element to associate descriptive text with inputs. The
for attribute should match the input's id.