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

Forms

Form fields

A form field is made up of a form control (such as an input or textarea) with an accompanying label to explain what each field is for.

All form fields should have a label to make sure they can be understood by assistive technologies.

Form controls

Input

Form inputs are the most common form control. Supported types are listed below and demonstrated in the form input example.

  • text
  • password
  • email
  • number
  • time
  • date
  • month
  • week
  • datetime-local
  • url
  • search
  • tel
  • color

It is a requirement of the HTML5 specification to declare a type for every form input, even if it's just a text input. Form elements won't be styled correctly without a supported type.

It is a requirement of the HTML5 specification to declare a type for every form input, even if it's just a text input. Form elements won't be styled correctly without a supported type.

<form>
<fieldset>
  <label for="form-inputs-example-1">Text input</label>
  <input type="text" class="w-full outline-1 pl-1" id="form-inputs-example-1">
</fieldset>

<fieldset>
  <label for="form-inputs-example-2">Date input</label>
  <input type="date" class="w-full outline-1 pl-1" id="form-inputs-example-2">
</fieldset>
</form>

Textarea

The height of a text area can be set using the rows attribute

<form>
<fieldset>
  <label for="form-textareas-example-1">Small textarea</label>
  <textarea class="w-full outline-1 pl-1" id="form-textareas-example-1" rows="2"></textarea>
</fieldset>

<fieldset>
  <label for="form-textareas-example-2">Large textarea</label>
  <textarea class="w-full outline-1 pl-1" id="form-textareas-example-2" rows="6"></textarea>
</fieldset>
</form>

Select

Select elements allow one option to be chosen by default, add the multiple attribute to allow more than one.

For single selects, the first option will be selected by default. Set the selected attribute on another option to change this.

Select elements have quite stubborn browser styling, such as rounded corners, which is difficult to override.

<form>
  <fieldset>
      <label for="form-select-example-1">Single select</label>
      <select class="outline-1 pl-1" id="form-select-example-1">
          <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>
      </select>
  </fieldset>

  <fieldset>
      <label for="form-select-example-2">Multiple select</label>
      <select class="outline-1 pl-1 w-full" id="form-select-example-2" multiple>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
          <option value="4">Option 4</option>
      </select>
  </fieldset>
</form>

File input

You can use the Drop-zone JavaScript plugin to create a 'drag and drop' file uploader for multiple files.

No file selected 
<form>
  <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>
</form>

Radio options and checkboxes

To pre-select an option set the checked attribute.

Select from these options
Select an option 
<form>
  <fieldset>
      <legend>Select from these options</legend>
      <div>
          <input type="checkbox" name="checkbox-input-set-1" id="form-checkbox-example-1-1" value="1">
          <label>Option 1</label>
      </div>
      <div>
          <input type="checkbox" name="checkbox-input-set-1" id="form-checkbox-example-1-2" value="2">
          <label>Option 2</label>
      </div>
      <div>
          <input type="checkbox" name="checkbox-input-set-1" id="form-checkbox-example-1-3" value="3">
          <label>Option 3</label>
      </div>
  </fieldset>
  <fieldset>
      <legend>Select an option</legend>
      <div>
          <input type="radio" name="radio-input-set-1" id="form-radio-example-1-1" value="1">
          <label>Option 1</label>
      </div>
      <div>
          <input type="radio" name="radio-input-set-1" id="form-radio-example-1-2" value="2">
          <label>Option 2</label>
      </div>
      <div>
          <input type="radio" name="radio-input-set-1" id="form-radio-example-1-3" value="3">
          <label>Option 3</label>
      </div>
  </fieldset>
</form>

Inline radio options and checkboxes

Use a different HTML layout to show the checkboxes and radio buttons in an inline layout.

Select from these options
Select an option 
<form>
<fieldset>
    <legend>Select from these options</legend>
    <div>
        <label>
            <input type="checkbox" name="checkbox-input-set-2" id="form-checkbox-example-2-1" value="1">
            Option 1
        </label>
        <label>
            <input type="checkbox" name="checkbox-input-set-2" id="form-checkbox-example-2-1" value="2">
            Option 2
        </label>
        <label>
            <input type="checkbox" name="checkbox-input-set-2" id="form-checkbox-example-2-1" value="3">
            Option 3
        </label>
    </div>
</fieldset>
  <fieldset>
      <legend>Select an option</legend>
      <div>
          <label>
            <input type="radio" name="radio-input-set-2" id="form-radio-example-2-1" value="1">            
            Option 1
          </label>
          <label>
            <input type="radio" name="radio-input-set-2" id="form-radio-example-2-2" value="2">            
            Option 2
          </label>
          <label>
            <input type="radio" name="radio-input-set-2" id="form-radio-example-2-3" value="3">            
            Option 3
          </label>
      </div>
  </fieldset>
</form>

Form buttons

Form buttons, such as the form submission button, are styled the same way as standard buttons.

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

Static control

Static controls can be used to represent pre-computed, or locked values within a form.

Adam Smith

adam.smith@example.co.uk

<form>
<fieldset>
  <div>
    <label for="form-inputs-example-1">Reporter name:</label>
    <p class="outline-1 px-2" id="form-static-example-1">Adam Smith</p>
  </div>
  <div>
    <label for="form-inputs-example-2">Reporter email:</label>
    <p class="outline-1 px-2" id="form-static-example-2">adam.smith@example.co.uk</p>
  </div>
</fieldset>
</form>

Form layouts

Form groups and fieldsets

The .bsk-form-group class is intended to wrap around an input, its label and extra elements (such as help text). It applies spacing to visually separate each input group.

Where a form field is standalone, use a <fieldset>. For a group of related controls, use <div>'s wrapped in a <fieldset> with a suitable <legend>.

Would you like a reply?
We will only use this information for contacting you about your feedback. 
<form>
<fieldset class="bsk-form-group">
  <b><label for="form-group-example-1">Your message</label></b>
  <textarea class="outline-1 w-full" id="form-group-example-1" rows="3"></textarea>
</fieldset>
<fieldset class="bsk-form-group">
  <legend>Would you like a reply?</legend>
  <div>
    <b><label for="form-group-example-2">Your name</label></b>
    <input class="outline-1 px-2 mb-2 w-full" type="text" id="form-group-example-2" placeholder="Adam Smith">
  </div>
  <div>
    <b><label for="form-group-example-3">Your email address</label></b>
    <input class="outline-1 px-2 mb-2 w-full" type="email" id="form-group-example-3" placeholder="john.smith@example.co.uk">
    <span>We will only use this information for contacting you about your feedback.</span>
  </div>
</fieldset>
</form>

Inline forms

Use the classes in the example to display labels and controls in a single horizontal row.

Some manual sizing may be needed for inline forms, ensure thorough testing at a range of grid sizes.

On small devices (smaller than 768 pixels) form fields will always stack.

Inline forms - Visible labels

<form class="my-2">
<div class="flex flex-wrap items-center gap-2">
  <label for="form-inline-example-1a">Username</label>
  <div class="mr-2">
    <input type="text" id="form-inline-example-1a" placeholder="john.smith@example.co.uk" class="w-48 px-2 py-1 border border-gray-400 rounded">
  </div>
  <label for="form-inline-example-2a">Password</label>
  <div class="mr-2">
    <input type="password" id="form-inline-example-2a" class="w-48 px-2 py-1 border border-gray-400 rounded">
  </div>
  <div class="flex items-center gap-2">
    <label class="flex items-center gap-1 mr-2" for="form-inline-example-3a">
      <input type="checkbox" id="form-inline-example-3a" value="1" checked class="">Remember Me
    </label>
    <button type="submit" class="bsk-btn bsk-btn-default">Login</button>
  </div>
</div>
</form>

Inline forms - Invisible labels

It is strongly recommended to include visible labels for each form field (the placeholder attribute is not universally supported yet for example).

Where labels are hidden, the .sr-only class should always be used to ensure assistive technologies can understand forms. Alternatively, you can use the aria-label, aria-labelledby or title attributes.

Labels should always be visible for checkboxes and radio options, to indicate what they do.

<form class="my-2">
<div class="flex flex-wrap items-center gap-2">
  <label class="sr-only" for="form-inline-example-1a">Username</label>
  <div class="mr-2">
    <input type="text" id="form-inline-example-1a" placeholder="john.smith@example.co.uk" class="w-48 px-2 py-1 border border-gray-400 rounded">
  </div>
  <label class="sr-only" for="form-inline-example-2a">Password</label>
  <div class="mr-2">
    <input type="password" id="form-inline-example-2a" class="w-48 px-2 py-1 border border-gray-400 rounded">
  </div>
  <div class="flex items-center gap-2">
    <label class="flex items-center gap-1 mr-2" for="form-inline-example-3a">
      <input type="checkbox" id="form-inline-example-3a" value="1" checked class="">Remember Me
    </label>
    <button type="submit" class="bsk-btn bsk-btn-default">Login</button>
  </div>
</div>
</form>

Form sizing - Width

<form>
<fieldset class="bsk-form-group">
  <b><label for="form-width-example-1">Text input</label></b>
  <input class="block outline-1 px-2 py-1 rounded" id="form-width-example-1"></input>
</fieldset>
<fieldset class="bsk-form-group">
  <b><label for="form-width-example-2">Text input wide</label></b>
  <input class="block outline-1 w-full md:w-140 px-2 py-1 rounded" id="form-width-example-2"></input>
</fieldset>
<fieldset class="bsk-form-group">
  <b><label for="form-width-example-3">Text input full width</label></b>
  <input class="block outline-1 w-full px-2 py-1 rounded" id="form-width-example-3"></input>
</fieldset>
</form>

Form sizing - Form control sizing

Add one of these classes to alter the size of a form control:

Form Control Size Form Control Size Class
Extra large form field .text-2xl
Large form field .text-xl
Small form field .text-sm 

<form>  
<fieldset class="bsk-form-group">
  <b><label for="form-sizing-example-1">Extra large text input</label></b>
  <input class="block border rounded px-2 py-1 text-2xl focus:outline-none focus:ring-2 focus:ring-blue-500" id="form-sizing-example-1"></input>
</fieldset>
<fieldset class="bsk-form-group">
  <b><label for="form-sizing-example-2">Large text input</label></b>
  <input class="block border rounded px-2 py-1 text-xl focus:outline-none focus:ring-2 focus:ring-blue-500" id="form-sizing-example-2"></input>
</fieldset>
<fieldset class="bsk-form-group">
  <b><label for="form-sizing-example-3">Default text input</label></b>
  <input class="block border rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500" id="form-sizing-example-3"></input>
</fieldset>
<fieldset class="bsk-form-group">
  <b><label for="form-sizing-example-4">Small text input</label></b>
  <input class="block border rounded px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" id="form-sizing-example-4"></input>
</fieldset>
</form>

Element states

Disabled state

Use the disabled attribute to mark a form field as disabled. This will prevent interaction, change the cursor to 'not-allowed', and alter the field's appearance. In most browsers, setting the disabled attribute on a <fieldset> will disable all of the fields it contains.


It is not safe to rely on this state to prevent users activating disabled actions.
Browsers may not enforce these properties, or users may trivially edit the DOM. Server side protections must be used for dangerous actions.

Not all browsers fully support setting the disabled attribute on a <fieldset>. To work around this, either apply the disabled attribute on form field elements directly, or use JavaScript to disable them.

Links, including links styled as buttons, within disabled fieldsets may not be enforced by all browsers. To work around this, either apply the disabled attribute on links directly, or use JavaScript to disable them.

<form>  
<fieldset disabled>
  <div class="bsk-form-group">
    <b><label for="form-disabled-example-1">Disabled text input</label></b>
    <input type="text" class="block border rounded px-2 py-1 text-2xl focus:outline-none focus:ring-2 focus:ring-blue-500 disabled" id="form-disabled-example-1"></input>
  </div>
  <div class="bsk-form-group">
    <b><label for="form-disabled-example-2">Disabled select menu</label></b>
    <select id="form-disabled-example-2" class="outline-1 block border rounded px-2 py-2">
        <option value="option-1">Disabled select menu</option>
        <option value="option-2">Option 2</option>
        <option value="option-3">Option 3</option>
    </select>
  </div>
  <div class="bsk-form-group">
    <b><label for="form-disabled-example-3">
      <input type="checkbox" class="outline-1" id="form-disabled-example-3"> Disabled checkbox
    </label></b>
  </div>
  <button type="submit" class="bsk-btn bsk-btn-primary" id="form-disabled-example-4">Disabled Submit</button>
</fieldset>
</form>

Readonly state

Use the readonly attribute to some form fields as read-only. This will prevent interaction and alter the field's appearance, but won't change the cursor.

Not all form elements support this value.
Exceptions include:

  • Form inputs with a type of:
    • hidden
    • color
    • checkbox
    • radio
    • file
  • selects
  • buttons
<form>  
<fieldset>
  <div class="bsk-form-group">
    <b><label for="form-readonly-example-1">Readonly text input</label></b>
    <input type="text" class="block border rounded px-2 py-1 readonly" id="form-readonly-example-1" readonly></input>
  </div>
  <div class="bsk-form-group">
    <b><label for="form-readonly-example-2">Readonly text input</label></b>
    <textarea class="block border rounded px-2 py-1 readonly" id="form-readonly-example-2" readonly></textarea>
  </div>
</fieldset>
</form>

Help text

Add context or other guidance to form fields, or more generally to sections of a form.

Where help text relates to a specific form field, the aria-describedby attribute should be used to inform assistive technologies, such as screen readers.

Would you like a reply?

If you would like a reply, please enter your contact details, we may not reply straight away.

Please enter your name as you would expect in a reply (e.g. Mr. A Smith).

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

<form>
<fieldset>
  <div>
    <legend>Would you like a reply?</legend>
    <hr>
    <p class="!pt-0">If you would like a reply, please enter your contact details, we may not reply straight away.</p>
    <b><label for="form-help-example-1">Your name:</label></b>
    <input type="text" class="block border rounded px-2 py-1" id="form-help-example-1" placeholder="Adam Smith" aria-describedby="form-help-example-1">
    <p class="!pt-0">Please enter your name as you would expect in a reply (e.g. Mr. A Smith).</p>
  </div>
  <div>
    <b><label for="form-help-example-2">Your email address:</label></b>
    <input type="email" class="block border rounded px-2 py-1" id="form-help-example-2" placeholder="adam.smith@email.co.uk" aria-describedby="form-help-example-2">
    <p class="!pt-0">We will only use this information for contacting you about your feedback.</p>
  </div>
</fieldset>
</form>

Validation

The Style Kit includes validation classes, based on the standard contextual colours. Apply to the parent of form fields, such as <fieldset>, for best effect.

Heads up! The Style Kit used to include a warning validation state. This has been removed and should not be used.

standard contextual icons can be used alongside validation messages.

Validation State Validation Class Associated Standard Context
Valid .bsk-has-success Success
Invalid .bsk-has-error Danger

Success validation

Would you like a reply?

If you would like a reply, please enter your contact details, we may not reply straight away.

Please enter your name as you would expect in a reply (e.g. Mr. A Smith).

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

Thank you for your response

 
<form>
<fieldset class="bsk-has-success">
  <div>
    <legend>Would you like a reply?</legend>
    <hr>
    <p class="!pt-0">If you would like a reply, please enter your contact details, we may not reply straight away.</p>
    <b><label for="form-help-example-1">Your name:</label></b>
    <input type="text" class="block border rounded px-2 py-1" id="form-help-example-1" placeholder="Adam Smith" aria-describedby="form-help-example-1">
    <p class="!pt-0">Please enter your name as you would expect in a reply (e.g. Mr. A Smith).</p>
  </div>
  <div>
    <b><label for="form-help-example-2">Your email address:</label></b>
    <input type="email" class="block border rounded px-2 py-1" id="form-help-example-2" placeholder="adam.smith@email.co.uk" aria-describedby="form-help-example-2">
    <p class="!pt-0">We will only use this information for contacting you about your feedback.</p>
    <b><p class="!pt-0">Thank you for your response</p></b>
  </div>
</fieldset>
</form>

Error validation

Would you like a reply?

If you would like a reply, please enter your contact details, we may not reply straight away.

Please enter your name as you would expect in a reply (e.g. Mr. A Smith).

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

adam.smith.co.uk, is not a valid email address

 
<form>
<fieldset class="bsk-has-error">
  <div>
    <legend>Would you like a reply?</legend>
    <hr>
    <p class="!pt-0">If you would like a reply, please enter your contact details, we may not reply straight away.</p>
    <b><label for="form-help-example-1">Your name:</label></b>
    <input type="text" class="block border rounded px-2 py-1" id="form-help-example-1" placeholder="Adam Smith" aria-describedby="form-help-example-1">
    <p class="!pt-0">Please enter your name as you would expect in a reply (e.g. Mr. A Smith).</p>
  </div>
  <div>
    <b><label for="form-help-example-2">Your email address:</label></b>
    <input type="email" class="block border rounded px-2 py-1" id="form-help-example-2" placeholder="adam.smith@email.co.uk" aria-describedby="form-help-example-2">
    <p class="!pt-0">We will only use this information for contacting you about your feedback.</p>
    <b><p class="!pt-0"><i class="bsk-alert-icon fa-fw fas fa-exclamation-circle" aria-hidden="true"></i> <em>adam.smith.co.uk</em>,
    is not a valid email address</p></b>
  </div>
</fieldset>
</form>

Examples

See the form examples for more examples of forms.