New This website is new, your feedback will help us to improve it.

Form examples

Example basic form

This form shows common form controls, optional states and how these can be arranged using the default form layout.

We will only use this information for contacting you about your feedback.

File input

No file selected 

<form>
<fieldset class="bsk-form-group">
    <label for="basic-form-example-field1">Your name</label>
    <input type="text" class="outline-1 px-2 mb-2 w-full" id="basic-form-example-field1" placeholder="John Smith">
</fieldset>

<hr>

<fieldset class="bsk-form-group">
    <label for="basic-form-example-field2">Your email address</label>
    <input type="email" class="outline-1 px-2 mb-2 w-full" id="basic-form-example-field2" placeholder="john.smith@example.co.uk">
    <small class="bsk-text-muted">
      We will only use this information for contacting you about your feedback.
    </small>
</fieldset>

<hr>

<fieldset class="bsk-form-group">
    <label for="basic-form-example-field3">Example select</label>
    <select class="outline-1" id="basic-form-example-field3">
        <option value="1">Option 1</option>
        <option value="2" selected>Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
    </select>
</fieldset>

<hr>

<fieldset class="bsk-form-group">
    <label for="basic-form-example-field4">Example multiple select</label>
    <select multiple class="outline-1 pl-1 w-full" id="basic-form-example-field4">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
    </select>
</fieldset>

<hr>

<fieldset class="bsk-form-group">
    <label for="basic-form-example-field5">Example textarea</label>
    <textarea class="outline-1 w-full" id="basic-form-example-field5" rows="3"></textarea>
</fieldset>

<hr>

<p>File input</p>
<fieldset class="bsk-form-group">
    <label for="basic-form-example-field6" class="bsk-btn bsk-btn-primary">Choose file</label>
    <input type="file" id="basic-form-example-field6" class="hidden" />
    <span id="file-name">No file selected</span>
</fieldset>
<script>
  const input = document.getElementById('basic-form-example-field6');
  const fileName = document.getElementById('file-name');
  input.addEventListener('change', () => {
    fileName.textContent = input.files.length
      ? input.files[0].name
      : 'No file selected';
  });
</script>

<hr>

<fieldset>
  <div>
    <label>
      <input type="radio" name="basic-form-example-field7" id="basic-form-example-field7-a" value="option1" checked>
      Option one
    </label>
  </div>
  <div>
    <label>
      <input type="radio" name="basic-form-example-field7" id="basic-form-example-field7-b" value="option2">
      Option two
    </label>
  </div>
  <div>
    <label>
      <input type="radio" name="basic-form-example-field7" id="basic-form-example-field7-c" value="option3" disabled>
      Option three is disabled
    </label>
  </div>
</fieldset>

<hr>

<fieldset>
    <div>
        <input type="checkbox">
        <label>Check me out</label>
    </div>
</fieldset>

<hr>

<button type="submit" class="bsk-btn bsk-btn-default">Submit</button>
</form>

Example form inputs

This form shows the various types of form input supported by the Style Kit.

Support for newer input types such as datetime varies significantly between devices and browsers. It is still recommended to use these newer types for forwards-compatibility, especially on mobile devices.

<form>
  <fieldset class="bsk-form-group">
    <label for="inputs-form-example-field1">Text input</label>
    <input type="text" class="w-full outline-1 pl-1" id="inputs-form-example-field1">
  </fieldset>
  <fieldset class="bsk-form-group">
    <label for="inputs-form-example-field2">Password input</label>
    <input type="password" class="w-full outline-1 pl-1" id="inputs-form-example-field2">
  </fieldset>
  <fieldset class="bsk-form-group">
    <label for="inputs-form-example-field3">Email input</label>
    <input type="email" class="w-full outline-1 pl-1" id="inputs-form-example-field3">
  </fieldset>
  <fieldset class="bsk-form-group">
    <label for="inputs-form-example-field4">Number input</label>
    <input type="number" class="w-full outline-1 pl-1" id="inputs-form-example-field4">
  </fieldset>
  <fieldset class="bsk-form-group">
    <label for="inputs-form-example-field5">Time input</label>
    <input type="time" class="w-full outline-1 pl-1" id="inputs-form-example-field5">
  </fieldset>
  <fieldset class="bsk-form-group">
    <label for="inputs-form-example-field6">Date input</label>
    <input type="date" class="w-full outline-1 pl-1" id="inputs-form-example-field6">
  </fieldset>
  <fieldset class="bsk-form-group">
    <label for="inputs-form-example-field7">Week input</label>
    <input type="week" class="w-full outline-1 pl-1" id="inputs-form-example-field7">
  </fieldset>
  <fieldset class="bsk-form-group">
    <label for="inputs-form-example-field8">Month input</label>
    <input type="month" class="w-full outline-1 pl-1" id="inputs-form-example-field8">
  </fieldset>
  <fieldset class="bsk-form-group">
    <label for="inputs-form-example-field9">Datetime local input</label>
    <input type="datetime-local" class="w-full outline-1 pl-1" id="inputs-form-example-field10">
  </fieldset>
  <fieldset class="bsk-form-group">
    <label for="inputs-form-example-field10">URL input</label>
    <input type="url" class="w-full outline-1 pl-1" id="inputs-form-example-field10">
  </fieldset>
  <fieldset class="bsk-form-group">
    <label for="inputs-form-example-field11">Search input</label>
    <input type="search" class="w-full outline-1 pl-1" id="inputs-form-example-field11">
  </fieldset>
  <fieldset class="bsk-form-group">
    <label for="inputs-form-example-field12">Telephone (tel) input</label>
    <input type="tel" class="w-full outline-1 pl-1" id="inputs-form-example-field12">
  </fieldset>
  <fieldset class="bsk-form-group">
    <label for="inputs-form-example-field13">Colour (color) input</label>
    <input type="color" class="w-full outline-1 pl-1" id="inputs-form-example-field13">
  </fieldset>
</form>