Panelita exports two components to create text inputs:

  • Text Input: Base text input component. Directly maps to an input element.

  • Text Input Field: Combines a label, text input and validation message in one.

Also, the inputs are combined to create Search Input and Select File Input components which are often used in Forms.
General Input 
<input type="text" placeholder="Placeholder">
Disabled 
<input type="text" placeholder="Placeholder" disabled>
Error message 
<div class="form-field vertical error">
    <input type="text" placeholder="Placeholder">
    <p class="error-msg">Error message.</p>
</div>
Input with label
The Input component also works with label in different situations. 
<div class="form-field vertical">
    <label>Label</label>
    <input type="text" placeholder="Placeholder">
</div>
Text input field
The Input component also have a custom component called Text Input Field for text field of greater number of characters. 
<textarea placeholder="Placeholder"></textarea>
Text input field disabled 
<textarea placeholder="Placeholder" disabled></textarea>
Text input field error message 
<div class="form-field vertical error">
    <textarea placeholder="Placeholder"></textarea>
    <p class="error-msg">Error message.</p>
</div>
Text input field with label and description
The Text Input Field component also works with label and description in different situations. 
<div class="form-field vertical">
    <label>Label</label>
    <p class="form-field-description">Description</p>
    <textarea placeholder="Placeholder"></textarea>
</div>
Text input field with label and description disabled 
<div class="form-field vertical">
    <label>Label</label>
    <p class="form-field-description">Description</p>
    <textarea placeholder="Placeholder" disabled></textarea>
</div>
Text input field with label and description error message 
<div class="form-field vertical error">
    <label>Label
    <p class="form-field-description">Description</p>
    <textarea placeholder="Placeholder"></textarea>
    <p class="error-msg">Error message.</p>
</div>
Search input
The Search Input component allows user to search via typing in text. 
<input type="text" class="search" placeholder="Search">
Search input disabled 
<input type="text" class="search" placeholder="Search" disabled>
Search input error message 
<div class="form-field vertical error">
    <input type="text" class="search" placeholder="Search">
    <p class="error-msg">Error message.</p>
</div>
Select file input
Select file input component allows user to attach files. Could be also considerated like Select components. 
<div class="file-input-container">
    <input type="file" class="file-input" id="fileinput1" onchange="uploadFile(this)">
    <label class="file-input-box" for="fileinput1">
        <div class="filename-container">
            <span class="filename"></span>
        </div>
        <div class="pbtn btn-secondary btn-sm">Select file</div>
    </label>	
</div>
Select file input disabled 
<div class="file-input-container disabled">
    <input type="file" class="file-input" id="fileinput1" onchange="uploadFile(this)">
    <label class="file-input-box" for="fileinput1">
        <div class="filename-container">
            <span class="filename"></span>
        </div>
        <div class="pbtn btn-secondary btn-sm">Select file</div>
    </label>	
</div>
Select file input error message 
<div class="form-field vertical error">
    <div class="file-input-container error">
        <input type="file" class="file-input" id="fileinput1" onchange="uploadFile(this)">
        <label class="file-input-box" for="fileinput1">
            <div class="filename-container">
                <span class="filename"></span>
            </div>
            <div class="pbtn btn-secondary btn-sm">Select file</div>
        </label>	
    </div>
    <p class="error-msg">Error message.</p>
</div>
Structure
1
Label: Standard label alignment is left-aligned with the field below. For placeholder text, use uppercase and lowercase and align left.
2
Required Field Label: Mark required fields with an asterisk (*). If all form fields are required, this is not necessary.
3
Disabled Field: Show disabled fields if users need to know what controls may be available.
4
Fields Lengh: The length of the field should reflect the intended length of the content. Available lengths are 75px, 150px, 250px, 350px, and 500px.
Validation and error messages behavior
Use validation and error messages to indicate when a form or field submission fails or requires additional information to be shown. When validating text fields in real-time, message icons will switch depending on the message type. For example, helper text changes into an error message when the content being input doesn't fit the criteria. Error and warning messages disappear when the criteria is met.
1
Unfocused text field.
2
Error message and icon.
3
Focused text field.