Basic inputs
Labels above the fields; hints under them; errors under the field that has them
Text fields
The type tells the phone which keyboard to show.
At least 8 characters.
Show the code
<div class="form-grid two w-100"> <div class="field"> <label class="label" for="bi-n">Product name</label> <div class="input"> <input id="bi-n" name="bi-n" type="text" value="Butter croissant"> </div> </div> <div class="field"> <label class="label" for="bi-e">Email</label> <div class="input"> <input id="bi-e" name="bi-e" autocomplete="email" type="email" placeholder="name@example.com"> </div> </div> <div class="field"> <label class="label" for="bi-p">Phone</label> <div class="input"> <input id="bi-p" name="bi-p" autocomplete="tel" type="tel" placeholder="(207) 555-0100" inputmode="tel"> </div> </div> <div class="field"> <label class="label" for="bi-w">Website</label> <div class="input"> <input id="bi-w" name="bi-w" type="url" placeholder="https://"> </div> </div> <div class="field"> <label class="label" for="bi-pw">Password</label> <div class="input"> <input id="bi-pw" name="bi-pw" aria-describedby="bi-pw-hint" autocomplete="new-password" type="password"> <button type="button" class="btn-reveal" data-reveal="bi-pw" aria-label="Show password" aria-pressed="false" data-tip="Show password"> <i class="ti ti-eye"> </i> </button> </div> <span class="hint" id="bi-pw-hint">At least 8 characters.</span> </div> <div class="field"> <label class="label" for="bi-q">Quantity</label> <div class="input"> <input id="bi-q" name="bi-q" type="number" value="12" inputmode="numeric" min="0"> </div> </div> </div>
With an icon or a unit
What the number means, at its side.
$
%
kg
Show the code
<div class="form-grid two w-100"> <div class="field"> <label class="label" for="bi-s">Search</label> <div class="input"> <i class="ti ti-search"> </i> <input id="bi-s" name="bi-s" type="search" placeholder="Name, SKU or barcode"> </div> </div> <div class="field"> <label class="label" for="bi-pr">Price</label> <div class="input"> <span class="affix">$</span> <input id="bi-pr" name="bi-pr" type="number" value="3.50" inputmode="decimal" step="0.01"> </div> </div> <div class="field"> <label class="label" for="bi-d">Discount</label> <div class="input"> <input id="bi-d" name="bi-d" type="number" value="10" inputmode="numeric"> <span class="affix">%</span> </div> </div> <div class="field"> <label class="label" for="bi-wt">Weight</label> <div class="input"> <input id="bi-wt" name="bi-wt" type="number" value="0.45" inputmode="decimal" step="0.01"> <span class="affix">kg</span> </div> </div> </div>
Long text
Grows with what is typed.
Show the code
<div class="field"> <label class="label" for="bi-t">Note on the receipt</label> <textarea class="input" id="bi-t" name="bi-t" rows="3">Thank you! Returns within 14 days with this receipt.</textarea> </div>
States
Read-only can be copied; disabled says why.
Set by your account.
Only the owner can change it.
Show the code
<div class="form-grid two w-100"> <div class="field"> <label class="label" for="bi-ro">Store</label> <div class="input"> <input id="bi-ro" name="bi-ro" readonly aria-describedby="bi-ro-hint" type="text" value="Market Street"> </div> <span class="hint" id="bi-ro-hint">Set by your account.</span> </div> <div class="field"> <label class="label" for="bi-di">Tax ID</label> <div class="input is-disabled"> <input id="bi-di" name="bi-di" disabled aria-describedby="bi-di-hint" type="text" value="93-4417260"> </div> <span class="hint" id="bi-di-hint">Only the owner can change it.</span> </div> </div>