Forms

We use forms for various contexts - sometimes for submitting information, but more crucially, for searching and filtering.

Different browsers and operation systems often display forms differently. We address this by clearing the default form styles, then creating our own customised appearance for all form elements, to ensure it indentifies with the brand and style of Fairfax & Favor while deliverying good usability and accessibility.

TEXT FIELDS

As with most elements in Fairfax & Favor, we use a clean, simple and uncluttered look. Text inputs should be uniform in width and in vertical spacing, with a 0.75rem gap to allow clear separation of items, without an unduly deep amount of content.

<div>
	<label class="tracking-wider uppercase text-sm">First Field *</label><br>
	<input type="text" class="w-full mb-3 border border-gray-300 p-2 hover:bg-gray-100 focus:bg-white transition duration-300" required="" name="formname[firstname]" placeholder="Field field text here">
</div>
<div>
	<label class="tracking-wider uppercase text-sm">Second Field</label><br>
	<input type="text" class="w-full mb-3 border border-gray-300 p-2 hover:bg-gray-100 focus:bg-white transition duration-300" name="formname[secondname]" placeholder="Second field text here">
</div>
<div>
	<label class="tracking-wider uppercase text-sm">Textarea for longer input</label><br>
	<textarea class="w-full mb-3 border border-gray-300 p-2 hover:bg-gray-100 focus:bg-white transition duration-300" rows="4" name="formname[description]" placeholder="Textarea text here"></textarea>
</div>

COMMON SELECTORS

We use checkboxes and dropdown options for selections, like everything, they are designed to fit with the Fairfax & Favor brand. If radio selectors are required, their style is also provided below.

For accessibility and best practice, we always ensure both the box or label are clickable to select the option.

<label class="flex items-start justify-start">
	<div class="flex items-center justify-center flex-shrink-0 w-6 h-6 mr-2 bg-white border">
		<input type="checkbox" class="absolute opacity-0" value="XYZ"> 
		<svg viewBox="0 0 20 20" class="hidden w-4 h-4 pointer-events-none fill-current text-sg-gold"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path></svg>
	</div> 
	<span>Tick box label</span>
</label>

<div class="flex items-center">
	<input id="radio2" type="radio" name="radio" class="hidden">
	<label for="radio2" class="flex items-center cursor-pointer">
		<span class="w-4 h-4 inline-block mr-1 rounded-full border border-grey"></span>
		Radio label choice
	</label>
</div>

<label class="tracking-wider uppercase text-sm">SELECT LABEL</label><br>
<select name="XYZ" class="w-full mb-3 border border-gray-300 p-2 hover:bg-gray-100 focus:bg-white transition duration-300">
	<option value="">First Option</option>
	<option value="">Second Option</option>
</select>

FORM BUTTONS

For forms, we use a simple and complimentary button style, with the consistent uppercase format for buttons and the slightly increased letter spacing. The default is always a black background with white contrasting typeface. Where a button is on a dark background, we will use the alternate brand gold background instead.

On forms that are narrow, we will match the width of the button with the width of all the other content, for wider forms we use the below.

<button type="submit" class="text-sm text-white uppercase bg-black tracking-wider">
	<div class="px-4 py-2 transition duration-300 transform hover:scale-105">Continue <i class="fa fa-angle-right"></i></div>
</button>

For all other buttons, such as call to action (CTA) buttons, please see the dedicated CTAs page.

EXPERIMENTAL

Not to be used, this button is a concept and entirely experimental.

CUSTOM SELECTOR

The size selector in Fairfax & Favor has been custom designed to compliment the brand while delivering an improved user experience through a one-click interface.