Use .form-field to style form controls like <input>, <select> and <textarea> elements. Label and description styles will automatically be applied to label and p elements, respectively.
Text fields, textareas and dropdowns
<form>
<fieldset>
<div class="form-field">
<label for="text-example">Text field</label>
<input type="text" id="text-example" placeholder="This is placeholder text">
<p>This is a description for the text field</p>
</div>
<div class="form-field required">
<label for="select-example">Select</label>
<select id="select-example" placeholder="This is placeholder text">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<p>This is a description for the select field</p>
</div>
<div class="form-field">
<label for="textarea-example">Textarea</label>
<textarea id="textarea-example" placeholder="This is placeholder text"></textarea>
<p>This is a description for the textarea field</p>
</div>
</fieldset>
</form>Search fields
The search form markup is provided automatically by the {{search}} helper.
Wrap the search form in .search to provide additional styling. Use .search-icon with your chosen SVG search icon.
<div class="search my-4 text-base">
<h2 class="sr-only">{{t 'search'}}</h2>
{{search submit=false instant=settings.instant_search class='form-field mb-0'}}
<svg class="search-icon transition" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true">
<circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
<path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
</svg>
</div>The appearance of the search fields can be modified using Sass or CSS. For example, rounded borders can be added using the $border-radius-search variable:
$border-radius-search: 2rem;
<div class="search my-4 text-base">
<h2 class="sr-only">{{t 'search'}}</h2>
{{search submit=false instant=settings.instant_search class='form-field mb-0'}}
<svg class="search-icon transition" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true">
<circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
<path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
</svg>
</div>Search modifier and utility classes can also be used to change the look-and-feel of search elements:
<div class="search search-lg my-4 text-base font-size-lg shadow-lg max-w-sm md:my-5 md:font-size-xl mx-auto">
<h2 class="sr-only">{{t 'search'}}</h2>
{{search submit=false instant=settings.instant_search class='form-field mb-0'}}
<svg class="search-icon transition" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true">
<circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
<path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
</svg>
</div>Checkboxes
By default, any number of checkboxes that are immediate sibling will be vertically stacked and appropriately spaced.
<div class="form-field boolean">
<input type="checkbox" value="" id="defaultCheck1">
<label for="defaultCheck1">
Default checkbox
</label>
</div>
<div class="form-field boolean">
<input type="checkbox" value="" id="defaultCheck2" disabled>
<label for="defaultCheck2">
Disabled checkbox
</label>
</div>States
Add the disabled boolean attribute to an input to disable it, or to a <fieldset> to disable all the controls within it.
<form>
<fieldset disabled>
<div class="form-field">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" placeholder="Disabled input">
</div>
<div class="form-field">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect">
<option>Disabled select</option>
</select>
</div>
<div class="form-field boolean">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
Can't check this
</label>
</div>
<button type="submit" class="button button-primary">Submit</button>
</fieldset>
</form>