Inputs
Form input controls like <input> and <textarea>. These fields will allow users to submit short and long form text input.
Default Input
The Default Input description from Figma goes here
1<div class="w-full">
2 <label class="input-label" for="formText">Input Label</label>
3 <input type="text" class="input" id="formText" placeholder="Placeholder..." >
4 <div class="input-additional-info">Additional Info</div>
5</div>
6<div class="w-full">
7 <label class="input-label" for="formTextarea">Input Label</label>
8 <textarea class="input" id="formTextarea" rows="3" placeholder="Placeholder..."></textarea>
9 <div class="input-additional-info">Additional Info</div>
10</div>
Disabled Input
The Disabled Input description from Figma goes here
1<div class="w-full">
2 <label class="input-label" for="formText">Input Disabled</label>
3 <input type="text" class="input" id="formText" placeholder="Placeholder..." disabled >
4 <div class="input-additional-info">Additional Info</div>
5 </div>
6 <div class="w-full">
7 <label class="input-label" for="formTextarea">Input Disabled</label>
8 <textarea class="input" id="formTextarea" rows="3" placeholder="Placeholder..." disabled ></textarea>
9 <div class="input-additional-info">Additional Info</div>
10 </div>Error Input
The Error Input description from Figma goes here
1<div class="w-full">
2 <label class="input-label" for="formText">Input Validation</label>
3 <input type="text" class="input" id="formText" placeholder="Placeholder..." disabled >
4 <div class="input-additional-info">Validation error message text</div>
5 </div>
6 <div class="w-full">
7 <label class="input-label" for="formTextarea">Input Validation</label>
8 <textarea class="input" id="formTextarea" rows="3" placeholder="Placeholder..." disabled ></textarea>
9 <div class="input-additional-info">Validation error message text</div>
10 </div>Accessibility
Make it clear what this input does for the user.
-
What to do with inputs
-
What not to do with inputs
Classes
Complete list of all CSS classes for the component.
| Name | Class |
|---|---|
| Default Input | input input-default |
| Disabled Input | input input-disabled |
| Error Input | input input-error |