Sections

Forms and fields

Forms and fields are used throughout the Help Center to allow visitors to filter lists and submit requests, comments and posts.

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.

Field types

Text, textarea and select dropdowns

This is a description for the text field

This is a description for the select field

This is a description for the textarea field

<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>

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 rounded max-w-md my-4 mx-auto">
  {{search submit=false instant=settings.instant_search class='form-field border rounded bg-white mb-0 transition'}}
  <svg class="search-icon transition" xmlns="http://www.w3.org/2000/svg" focusable="false" 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 default style can be easily modified using utility classes.

<div class="search max-w-md my-4 mx-auto border-radius shadow font-size-2xl">
  {{search submit=false instant=settings.instant_search class='form-field border border-radius bg-white mb-0 transition'}}
  <svg class="search-icon transition" xmlns="http://www.w3.org/2000/svg" focusable="false" 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>

Disabled

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>