Forms
The fields of annotate.now and pos.usecue.com: text, textareas, selects, multiselects, checkboxes, radios, switches and the code input.
Text fields
Every input, select and textarea, without a class: square, with a light border and a hint of gray; focused, the ring of the browser. A link at the end of the label goes after the field in the html, so Tab goes from field to field.
HTML
<form data-demo>
<div class="form-group">
<label for="name">Your name</label>
<input type="text" id="name" name="name" autocomplete="name">
</div>
<div class="form-group">
<label for="website">Business website</label>
<input type="text" id="website" name="website" inputmode="url" placeholder="example.com">
<p class="form-help">Without https://, we add that ourselves.</p>
</div>
<div class="form-group">
<label for="current">Password</label>
<input type="password" id="current" name="password" autocomplete="current-password">
<a class="label-link" href="#text-fields">forgotten?</a>
</div>
<div class="form-group invalid">
<label for="mail">E-mail address</label>
<input type="email" id="mail" name="email" value="name@" aria-invalid="true" aria-describedby="mail-error">
<p class="form-error" id="mail-error">Enter an e-mail address like name@example.com.</p>
</div>
<div class="form-group">
<label for="account">Account</label>
<input type="email" id="account" value="name@example.com" disabled>
</div>
<button class="button">Save</button>
</form>Search and address bar
The search field above a list, with a magnifier. The address bar of annotate.now: a field and its button in one box, for the first thing to try.
HTML
<div class="form-group">
<input type="search" placeholder="Search" aria-label="Search">
</div>
<form class="urlbar" data-demo>
<input type="text" name="url" placeholder="https://www.usecue.com" inputmode="url" aria-label="Web page URL">
<button type="submit" class="button">Try it</button>
</form>Textareas
Like the text fields, at least 120px high, and only taller by hand.
Tell us a bit about you and your business.
HTML
<div class="form-group">
<label for="comment">Comment</label>
<textarea id="comment" placeholder="Can this heading be white? It looks grey to me."></textarea>
</div>
<div class="form-group invalid">
<label for="message">Message</label>
<textarea id="message" aria-invalid="true" aria-describedby="message-error"></textarea>
<p class="form-error" id="message-error">Tell us a bit about you and your business.</p>
</div>Selects
With the arrow of the multiselect. An <hr> in a select draws a line between its options, like between the translations of a page and the languages to add in the Usecue CMS.
HTML
<div class="form-group">
<label for="size">Size of the business</label>
<select id="size" required>
<option value=""></option>
<option>Just me</option>
<option>2-10 people</option>
<option>11-50 people</option>
<option>More than 50 people</option>
</select>
</div>
<div class="form-group">
<label for="translations">Translations</label>
<select id="translations">
<option value="" selected hidden disabled>1 translation (nl)</option>
<option value="nl">Nederlands</option>
<hr>
<option value="de">Add Deutsch</option>
<option value="fr">Add Français</option>
</select>
</div>Multiselects
The multiselect of code.usecue.com/multiselect: a plain select multiple and js/multiselect.js. With a mouse a list of checkboxes, on a touch screen the multiselect of the phone. Both send the same values, and required still works. An optgroup gets a label, an <hr> a line. Add ?debug=1 to the address to switch between the two with the plus and minus behind the label.
HTML
<form data-demo>
<div class="form-group">
<label for="channels">Channels</label>
<select id="channels" name="channels" multiple required data-summary="{n} selected">
<option value="web">Website</option>
<option value="mail">E-mail</option>
<option value="phone">Phone</option>
<option value="shop">In the shop</option>
</select>
</div>
<div class="form-group">
<label for="groceries">Groceries</label>
<select id="groceries" name="groceries" multiple data-summary="{n} selected">
<optgroup label="Fruit">
<option value="apple">Apples</option>
<option value="banana">Bananas</option>
<option value="cherry">Cherries</option>
</optgroup>
<hr>
<optgroup label="Vegetables">
<option value="artichoke">Artichokes</option>
<option value="broccoli">Broccoli</option>
<option value="cabbage">Cabbages</option>
</optgroup>
<hr>
<optgroup label="Fish">
<option value="cod">Cod</option>
<option value="salmon">Salmon</option>
</optgroup>
</select>
</div>
<button class="button">Send</button>
</form>Checkboxes, radios and switches
The checkboxes and radio buttons of the browser, in its own colour. A switch for a setting that applies at once, like “Hide empty boards”.
HTML
<fieldset>
<legend>Receipts</legend>
<label class="choice"><input type="checkbox" name="receipt" checked> Print a receipt</label>
<label class="choice"><input type="checkbox" name="mail"> Send the receipt by e-mail</label>
<label class="choice"><input type="checkbox" disabled> Send by SMS (not available)</label>
</fieldset>
<fieldset>
<legend>Payment</legend>
<label class="choice"><input type="radio" name="payment" checked> QR code</label>
<label class="choice"><input type="radio" name="payment"> Payment link</label>
<label class="choice"><input type="radio" name="payment"> On account</label>
</fieldset>
<label class="switch"><input type="checkbox" checked><span class="slider"></span>Hide empty boards</label>Code input
Six boxes behind one field, for the code of two-step verification. Pasting and autofill still work, and it sends the form when the sixth digit is there.
HTML
<form data-demo>
<div class="codeboxes">
<span></span><span></span><span></span><span></span><span></span><span></span>
<input name="code" inputmode="numeric" autocomplete="one-time-code" maxlength="6" pattern="[0-9]{6}" aria-label="Verification code">
</div>
<label class="choice"><input type="checkbox" name="trust" value="1"> Trust this connection</label>
</form>