Text Input Component
The Text Input component is an essential part of any form, allowing users to enter and edit text.
Text Input
<input type="text" class="form-input" placeholder="First Name"/>
<input type="text" className="form-input" placeholder="First Name"/>
Number Input
<input type="number" class="form-input" placeholder="Quantity"/>
<input type="number" className="form-input" placeholder="Quantity"/>
Email Input
<input type="email" class="form-input is-valid" placeholder="[email protected]"/>
<input type="email" className="form-input is-valid" placeholder="[email protected]"/>
By using the .is-valid class on any input, you can validate it easily with just HTML and CSS—no JavaScript needed.
URL Input
<input type="url" class="form-input" placeholder="Website link"/>
<input type="url" className="form-input" placeholder="Website link"/>
Input Sizes
<input type="text" class="form-input input-sm" placeholder="First Name"/>
<input type="text" class="form-input" placeholder="First Name"/>
<input type="text" class="form-input input-lg" placeholder="First Name"/>
<input type="text" className="form-input input-sm" placeholder="First Name"/>
<input type="text" className="form-input" placeholder="First Name"/>
<input type="text" className="form-input input-lg" placeholder="First Name"/>