Style individual form controls and utilize common layouts.
Overview:
We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes <fieldset>s, WebKit validation bubbles, and most textual <input>s.
Specific types of textual <input>s are styled automatically, but .form-control is available should you need it.
Always declare a type on your <button>s.
Form layouts rely on form groups.
Kitchen sink
All our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.
Form controls in Primer CSS currently have no basic layout specified (this is by design). You'll need to use <fieldset>s, <div>s, or other elements and styles to rearrange them.
Webkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.
<form>
<input
class="form-control input-hide-webkit-autofill"
placeholder="Hide Webkit's contact autofill on this input"
type="text"
aria-label="Hide Webkit's contact autofill on this input"
/>
</form>
Selects
Primer CSS adds light height and vertical-align styles to <select>s for all browsers to render them consistently with textual inputs.
Convey success, errors and warnings for form groups. For github.com consider using the <auto-check> element to perform server-side validation on an input.
If the input is valid, add the .successed class to the <div class="form-group"> element. Next add/update a success message to the .note element, as well as the .success class.
<formclass="pb-6">
<divclass="form-group successed">
<divclass="form-group-header">
<labelfor="username-input">Username</label>
</div>
<divclass="form-group-body">
<input
class="form-control"
type="text"
value="monalisa"
id="username-input"
aria-describedby="username-input-validation"
/>
</div>
<pclass="note success"id="username-input-validation">monalisa is available</p>
</div>
</form>
If the input is not valid, add the .errored class to the <div class="form-group"> element. Next add/update an error message to the .note element, as well as the .error class.
<formclass="pb-6">
<divclass="form-group errored">
<divclass="form-group-header">
<labelfor="username-input">Username</label>
</div>
<divclass="form-group-body">
<input
class="form-control"
type="text"
value="monalisa"
id="username-input"
aria-describedby="username-input-validation"
/>
</div>
<pclass="note error"id="username-input-validation">monalisa is not available. monalisa-beep, monalisa-cyber, or monalisa87 are available.</p>
</div>
</form>
If the input should show a warning, add the .warn class to the <div class="form-group"> element. Next add/update a warning message to the .note element, as well as the .warning class.
<formclass="pb-6">
<divclass="form-group warn">
<divclass="form-group-header">
<labelfor="username-input">Username</label>
</div>
<divclass="form-group-body">
<input
class="form-control"
type="text"
value="monalisa-monalisa-monalisa-monalisa-"
id="username-input"
aria-describedby="username-input-validation"
/>
</div>
<pclass="note warning"id="username-input-validation">36of maximum 39 characters entered.</p>
</div>
</form>
Checkboxes and radios
Utilities to spice up the alignment and styling of checkbox and radio controls.
This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!
</p>
</div>
</form>
You may also add emphasis to the label:
<form>
<divclass="form-checkbox">
<label>
<inputtype="checkbox"checked="checked"/>
<emclass="highlight">Available for hire</em>
</label>
</div>
</form>
Show / hide content based on a checkbox or radio button state
Content that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the aria-live="polite" attribute on the parent label for added content to be announced when displayed.
