Form elements

Form controls

Input

HTML

<div class="occlss-form-cntrls  ">
  <label class="occlss-form-cntrls__label " for="text-input-label">Text input label</label>
  <input class="occlss-form-cntrls__input " id="text-input-label" name="text-input-label" type="text">
</div>

When to use this component

Use the text input component when you need to let users enter text that’s no longer than a single line, such as their name or phone number.

When not to use this component

Do not use the text input component if you need to let users enter longer answers that might span multiple lines. In this case, you should use the textarea component.

Text input label

All text inputs must have visible labels; placeholder text is not an acceptable replacement for a label as it vanishes when users start typing.

Labels should be aligned above the text input they refer to. They should be short, direct and written in sentence case. Do not use colons at the end of labels.

Use appropriately-sized text inputs

Help users understand what they should enter by making text inputs the right size for the content they’re intended for.

By default, the width of text inputs is fluid and will fit the full width of the container they are placed into.

Hint text

Use hint for help that’s relevant to the majority of users, like how their information will be used, or where to find it.

Input disabled

HTML

<div class="occlss-form-cntrls  ">
  <label class="occlss-form-cntrls__label " for="text-input-label-disabled">Text input label disabled</label>
  <input class="occlss-form-cntrls__input " id="text-input-label-disabled" name="text-input-label-disabled" type="text" disabled>
</div>

Input error

HTML

<div class="occlss-form-cntrls occlss-form-cntrls--error ">
  <label class="occlss-form-cntrls__label occlss-form-cntrls__label--error " for="text-input-label">Text input label</label>
  <input class="occlss-form-cntrls__input " id="text-input-label" name="text-input-label" type="text" aria-describedby="describedby-text-input-label">
  <span class="occlss-icon occlss-icon--exclamation-mark occlss-icon--error" aria-hidden="true">
    <svg aria-hidden="true" class="occlss-icon__container  ">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#exclamation-mark" class="icon__source icon__source--svg "></use>
    </svg>
  </span>
  <span class="occlss-form__error-message" id="describedby-text-input-label" role="alert">Helpful error message</span>
</div>

Input inline

HTML

<div class="occlss-form-cntrls  occlss-form-cntrls--inline">
  <label class="occlss-form-cntrls__label " for="text-input-inline-label">Text input inline label</label>
  <input class="occlss-form-cntrls__input " id="text-input-inline-label" name="text-input-inline-label" type="text">
</div>

Form controls container max width 210px

HTML

<div class="occlss-form-cntrls  occlss-form-cntrls--size-210">
  <label class="occlss-form-cntrls__label " for="form-controls-container-max-width-210px">Form controls container max width 210px</label>
  <input class="occlss-form-cntrls__input " id="form-controls-container-max-width-210px" name="form-controls-container-max-width-210px" type="text">
</div>

Form controls container max width 310px

HTML

<div class="occlss-form-cntrls  occlss-form-cntrls--size-310">
  <label class="occlss-form-cntrls__label " for="form-controls-container-max-width-310px">Form controls container max width 310px</label>
  <input class="occlss-form-cntrls__input " id="form-controls-container-max-width-310px" name="form-controls-container-max-width-310px" type="text">
</div>

Form controls container max width 450px

HTML

<div class="occlss-form-cntrls  occlss-form-cntrls--size-450">
  <label class="occlss-form-cntrls__label " for="form-controls-container-max-width-450px">Form controls container max width 450px</label>
  <input class="occlss-form-cntrls__input " id="form-controls-container-max-width-450px" name="form-controls-container-max-width-450px" type="text">
</div>

Input max width 210px

HTML

<div class="occlss-form-cntrls  ">
  <label class="occlss-form-cntrls__label " for="input-max-width-210px">Input max width 210px</label>
  <input class="occlss-form-cntrls__input occlss-form-cntrls__input--size-210" id="input-max-width-210px" name="input-max-width-210px" type="text">
</div>

Input max width 310px

HTML

<div class="occlss-form-cntrls  ">
  <label class="occlss-form-cntrls__label " for="input-max-width-310px">Input max width 310px</label>
  <input class="occlss-form-cntrls__input occlss-form-cntrls__input--size-310" id="input-max-width-310px" name="input-max-width-310px" type="text">
</div>

Input max width 450px

HTML

<div class="occlss-form-cntrls  ">
  <label class="occlss-form-cntrls__label " for="input-max-width-450px">Input max width 450px</label>
  <input class="occlss-form-cntrls__input occlss-form-cntrls__input--size-450" id="input-max-width-450px" name="input-max-width-450px" type="text">
</div>

Select

HTML

<div class="occlss-form-cntrls  ">
  <label class="occlss-form-cntrls__label " for="select">Select</label>
  <select class="occlss-form-cntrls__select " id="select" name="select">
    <option value="option-a">Option A</option>
    <option value="option-b">Option B</option>
    <option value="option-c">Option C</option>
    <option value="option-d">Option D</option>
  </select>
</div>

Select disabled

HTML

<div class="occlss-form-cntrls  ">
  <label class="occlss-form-cntrls__label " for="select-disabled">Select disabled</label>
  <select class="occlss-form-cntrls__select " id="select-disabled" name="select-disabled" disabled>
    <option value="option-a">Option A</option>
    <option value="option-b">Option B</option>
    <option value="option-c">Option C</option>
    <option value="option-d">Option D</option>
  </select>
</div>

Textarea

HTML

<div class="occlss-form-cntrls  ">
  <label class="occlss-form-cntrls__label " for="textarea">Textarea</label>
  <textarea class="occlss-form-cntrls__textarea" id="textarea" name="textarea"></textarea>
</div>

Textarea disabled

HTML

<div class="occlss-form-cntrls  ">
  <label class="occlss-form-cntrls__label " for="textarea-disabled">Textarea disabled</label>
  <textarea class="occlss-form-cntrls__textarea" id="textarea-disabled" name="textarea-disabled" disabled></textarea>
</div>

Textarea error

HTML

<div class="occlss-form-cntrls occlss-form-cntrls--error ">
  <label class="occlss-form-cntrls__label occlss-form-cntrls__label--error " for="textarea-error">Textarea error</label>
  <span class="occlss-form__error-message" id="describedby-textarea-error" role="alert">Helpful error message</span>
  <textarea class="occlss-form-cntrls__textarea" id="textarea-error" name="textarea-error" aria-describedby="describedby-textarea-error"></textarea>
  <span class="occlss-icon occlss-icon--exclamation-mark occlss-icon--error" aria-hidden="true">
    <svg aria-hidden="true" class="occlss-icon__container  ">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#exclamation-mark" class="icon__source icon__source--svg "></use>
    </svg>
  </span>
</div>

Checkbox

HTML

<div class="occlss-form-cntrls  occlss-form-cntrls--checkbox">
  <input class="occlss-form-cntrls__checkbox" id="checkbox" name="checkbox" type="checkbox">
  <label class="occlss-form-cntrls__label occlss-form-cntrls__label--checkbox" for="checkbox">Checkbox</label>
</div>

Checkbox disabled

HTML

<div class="occlss-form-cntrls  occlss-form-cntrls--checkbox">
  <input class="occlss-form-cntrls__checkbox" id="checkbox-disabled" name="checkbox-disabled" type="checkbox" disabled>
  <label class="occlss-form-cntrls__label occlss-form-cntrls__label--checkbox" for="checkbox-disabled">Checkbox disabled</label>
</div>

Radio button

HTML

<div class="occlss-form-cntrls  occlss-form-cntrls--radioitem">
  <input class="occlss-form-cntrls__radiobutton" id="radio-button" name="radio-button" type="radio">
  <label class="occlss-form-cntrls__label occlss-form-cntrls__label--radiobutton" for="radio-button">Radio button</label>
</div>

Radio button disabled

HTML

<div class="occlss-form-cntrls  occlss-form-cntrls--radioitem">
  <input class="occlss-form-cntrls__radiobutton" id="radio-button-disabled" name="radio-button-disabled" type="radio" disabled>
  <label class="occlss-form-cntrls__label occlss-form-cntrls__label--radiobutton" for="radio-button-disabled">Radio button disabled</label>
</div>

Changelog

2.4.8

Dissabled style added to input, textarea and select elements

2.4.4

Radio buttons and checkboxes style change, modifier classes added to controls container and label elements

2.0.0

Radio buttons and checkboxes text spacing added, that text will be aligned equally the same on each line

1.0.0

Component added