Paragraphs
Form Elements
The site-wide styling of form controls — inputs, selects, textareas, checkboxes, radios and buttons. Useful as a reference when building Webforms or hand-written forms.
Live example
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;max-width:640px;">
<div><label for="ex-text">Text input</label><br><input id="ex-text" type="text" placeholder="Enter text"></div>
<div><label for="ex-email">Email input</label><br><input id="ex-email" type="email" placeholder="you@example.com"></div>
<div><label for="ex-select">Select</label><br><select id="ex-select"><option>Option one</option><option selected>Option two</option><option>Option three</option></select></div>
<div><label for="ex-date">Date</label><br><input id="ex-date" type="date"></div>
</div>
<p style="margin-top:1rem;"><label for="ex-textarea">Textarea</label><br><textarea id="ex-textarea" rows="3" style="width:100%;max-width:640px;">Sample longer text…</textarea></p>
<fieldset style="max-width:640px;"><legend>Checkboxes</legend>
<label><input type="checkbox" checked> Strategy briefings</label><br>
<label><input type="checkbox"> Product updates</label><br>
<label><input type="checkbox" disabled> Disabled option</label>
</fieldset>
<fieldset style="max-width:640px;margin-top:0.75rem;"><legend>Radios</legend>
<label><input type="radio" name="ex-radio" checked> Email</label><br>
<label><input type="radio" name="ex-radio"> Phone</label>
</fieldset>
<p style="margin-top:1rem;"><button type="button" class="form-submit">Submit button</button> <button type="button" class="button button--primary">Primary button</button> <button type="button" class="pill-button">Pill button</button></p>