Form elements

This section describes which form elements are supported and which variants are available.

Form

<form novalidate="" autocomplete="off">
    <!-- Form elements, e.g. fieldsets, form-groups, etc., go here -->
</form>

Fieldset

Fieldset title
Here goes the form content in a native fieldset.
Fieldset title
Here goes the form content for this fieldset with fieldset class.
<fieldset>
    <legend>Fieldset title</legend>
    <div>Here goes the form content in a native fieldset.</div>
</fieldset>

<div class="fieldset">
    <div class="legend">Fieldset title</div>
    <div>Here goes the form content for this fieldset with fieldset class.</div>
</div>

Text input

Text input description.
Required text input description.
Text input description: in this case the description is very, very long and more than one line of text with a link inside. This example should give you a preview of how this should look like.
Read-only text input description.
Disabled text input description.
Focused text input description text.
Text input description for text input of type 'number'.
Text input description for text input of type 'password'.
<div class="inputGroup">
    <label class="inputGroup__label" for="text-input01">
        Text input
    </label>
    <input class="inputGroup__textInput" type="text" value="Text input with value" id="text-input01" />
    <div class="inputGroup__description">
        Text input description.
    </div>
</div>

<div class="inputGroup">
    <label class="inputGroup__label is-required" for="text-input02">
        Required text input
    </label>
    <input class="inputGroup__textInput" type="text" placeholder="Text input with placeholder and without a value" id="text-input02" />
    <div class="inputGroup__description">
        Required text input description.
    </div>
</div>

<div class="inputGroup">
    <label class="inputGroup__label" for="text-input03">
        Text input with a long description text
    </label>
    <input class="inputGroup__textInput" type="text" value="Text input with value and a very long description text with a link" id="text-input03" />
    <div class="inputGroup__description">
        Text input description: in this case the description is very, very long and more than one line <a href="#">of text with a link</a> inside. This example should give you a preview of how this should look like.
    </div>
</div>

<div class="inputGroup">
    <label class="inputGroup__label" for="text-input04">
        Read-only text input
    </label>
    <input class="inputGroup__textInput is-readonly" readonly="readonly" type="text" value="Read-only text input with value" id="text-input04" />
    <div class="inputGroup__description">
        Read-only text input description.
    </div>
</div>

<div class="inputGroup">
    <label class="inputGroup__label" for="text-input05">
        Disabled text input
    </label>
    <input class="inputGroup__textInput is-disabled" disabled="disabled" type="text" value="Disabled text input with value" id="text-input05" />
    <div class="inputGroup__description">
        Disabled text input description.
    </div>
</div>

<div class="inputGroup">
    <label class="inputGroup__label" for="text-input06">
        Focused text input
    </label>
    <input class="inputGroup__textInput is-focused" type="text" value="Focused text input with value"  id="text-input06" />
    <div class="inputGroup__description">
        Focused text input description text.
    </div>
</div>

<div class="inputGroup">
    <label class="inputGroup__label" for="number-input01">
        Text input of type 'number'
    </label>
    <input class="inputGroup__input" type="number" id="number-input01" value="123" />
    <div class="inputGroup__description">
        Text input description for text input of type 'number'.
    </div>
</div>

<div class="inputGroup">
    <label class="inputGroup__label" for="password-input01">
        Text input of type 'password'
    </label>
    <input class="inputGroup__input" type="password" id="password-input01" value="testtest" />
    <div class="inputGroup__description">
        Text input description for text input of type 'password'.
    </div>
</div>

Note that the widths of the input fields are based on pixel values but are set in rem units. If the font size is increased by the end user in the browsers, also the widths scale accordingly.

Usage

ElementClassDescription
.inputGroup__textInput .is-readonly When this state class is present the text input element is read-only.
.inputGroup__textInput .is-disabled When this state class is present the text input element is disabled.
.inputGroup__textInput .is-focused When this state class is present the text input element is focused.
.inputGroup__label .is-required Marks the following text input element as mandatory and adds a red asterisk after the text input label.

Textarea

Optional description for textarea with placeholder.
Optional description for required textarea with placeholder.
Optional description for readonly textarea with value.
Optional description for disabled textarea with value.
<div class="inputGroup">
    <label class="inputGroup__label" for="textarea01">
        Textarea with placeholder
    </label>
    <textarea class="inputGroup__textarea" spellcheck="false" id="textarea01" placeholder="Lorem ipsum dolor sit amet consectetur adipising elit."></textarea>
    <div class="inputGroup__description">
        Optional description for textarea with placeholder.
    </div>
</div>

<div class="inputGroup">
    <label class="inputGroup__label is-required" for="textarea02">
        Required textarea with placeholder
    </label>
    <textarea class="inputGroup__textarea" spellcheck="false" id="textarea02" placeholder="Lorem ipsum dolor sit amet consectetur adipising elit."></textarea>
    <div class="inputGroup__description">
        Optional description for required textarea with placeholder.
    </div>
</div>

<div class="inputGroup">
    <label class="inputGroup__label" for="textarea03">
        Readonly textarea
    </label>
    <textarea class="inputGroup__textarea is-readonly" readonly="readonly" spellcheck="false" id="textarea03">Lorem ipsum dolor sit amet consectetur adipising elit.
    </textarea>
    <div class="inputGroup__description">
        Optional description for readonly textarea with value.
    </div>
</div>

<div class="inputGroup">
    <label class="inputGroup__label" for="textarea04">
        Disabled textarea
    </label>
    <textarea class="inputGroup__textarea is-disabled" disabled="disabled" spellcheck="false" id="textarea04">Lorem ipsum dolor sit amet consectetur adipising elit.
    </textarea>
    <div class="inputGroup__description">
        Optional description for disabled textarea with value.
    </div>
</div>

Checkbox

Optional description text for group of checkboxes.
<div class="inputGroup">
    <label class="inputGroup__label is-required" for="checkbox01">
        Optional label for group of checkboxes
    </label>

    <div class="checkboxWrapper">
        <input type="checkbox" class="inputGroup__checkbox" id="checkbox01" name="checkbox-A" value="checkbox01" checked="checked" />
        <label for="checkbox01">Option 01</label>
        <label for="checkbox01" class="checkbox__description">Optional description text for option 01.</label>
    </div>

    <div class="checkboxWrapper">
        <input type="checkbox" class="inputGroup__checkbox" id="checkbox02" name="checkbox-A" value="checkbox02" />
        <label for="checkbox02">Option 02 with a very long label so it might have to wrap on small screens because it does not fit one line.</label>
        <label for="checkbox02" class="checkbox__description">Optional description text for option 02.</label>
    </div>

    <div class="checkboxWrapper">
        <input type="checkbox" class="inputGroup__checkbox" id="checkbox03" name="checkbox-A" value="checkbox03" />
        <label for="checkbox03">Option 03</label>
    </div>

    <div class="checkboxWrapper">
        <input type="checkbox" class="inputGroup__checkbox" id="checkbox04" name="checkbox-A" value="checkbox04" />
        <label for="checkbox04">Option 04</label>
    </div>

    <div class="checkboxWrapper">
        <input type="checkbox" class="ipnutGroup__checkbox is-disabled" id="checkbox05" name="checkbox-A" value="checkbox05" disabled="disabled" />
        <label for="checkbox05">Option 05</label>
        <label for="checkbox05" class="checkbox__description">Optional description text for option 05.</label>
    </div>

    <div class="checkboxWrapper">
        <input type="checkbox" class="inputGroup__checkbox is-disabled" id="checkbox06" name="checkbox-A" value="checkbox06" disabled="disabled" checked="checked" />
        <label for="checkbox06">Option 06</label>
        <label for="checkbox06" class="checkbox__description">Optional description text for option 06.</label>
    </div>

    <div class="inputGroup__description">
        Optional description text for group of checkboxes.
    </div>
</div>

Usage

ElementClassDescription
label Important: The label element must not be removed (use an empty one if you don't need it), otherwise there won't be any checkbox.
.checkbox .is-readonly When this state class is present, the checkbox element is read-only.
.checkbox .is-disabled When this state class is present, the checkbox element is disabled.
.checkbox .is-focused When this state class is present, the checkbox element is focused.
.inputGroup__label .is-required Marks the following group of checkboxes as mandatory and adds a red asterisk after the checkbox group label.

Radio button

Optional description text for a group of radio buttons.
<div class="inputGroup">
    <label class="inputGroup__label is-required" for="radio-button01">
        Optional label for group of radio buttons
    </label>

    <div class="radioButtonWrapper">
        <input type="radio" class="inputGroup__radioButton" id="radio-button01" name="radio-button" value="option01" checked />
        <label for="radio-button01">Option 01</label>
        <label for="radio-button01" class="radioButton__description">Optional description text for option 01.</label>
    </div>

    <div class="radioButtonWrapper">
        <input type="radio" class="inputGroup__radioButton" id="radio-button02" name="radio-button" value="option02" />
        <label for="radio-button02">Option 02  with a very long label so it might have to wrap on small screens because it does not fit one line.</label>
        <label for="radio-button02" class="radioButton__description">Optional description text for option 02.</label>
    </div>

    <div class="radioButtonWrapper">
        <input type="radio" class="inputGroup__radioButton" id="radio-button03" name="radio-button" value="option03" />
        <label for="radio-button03">Option 03</label>
    </div>

    <div class="radioButtonWrapper">
        <input type="radio" class="inputGroup__radioButton" id="radio-button04" name="radio-button" value="option04" />
        <label for="radio-button04">Option 04</label>
    </div>

    <div class="radioButtonWrapper">
        <input type="radio" class="inputGroup__radioButton is-disabled" id="radio-button05" name="radio-button" value="option05" disabled="disabled" />
        <label for="radio-button05">Option 05</label>
        <label for="radio-button05" class="radioButton__description">Optional description text for option 05.</label>
    </div>

    <div class="radioButtonWrapper">
        <input type="radio" class="inputGroup__radioButton" id="radio-button06" name="radio-button" value="option06" checked disabled="disabled" />
        <label for="radio-button06">Option 06</label>
        <label for="radio-button06" class="radioButton__description">Optional description text for option 06.</label>
    </div>

    <div class="inputGroup__description">
        Optional description text for a group of radio buttons.
    </div>
</div>

Usage

ElementClassDescription
label Important: The label element must not be removed (use an empty one if you don't need it), otherwise there won't be any radio button.
.inputGroup__radioButton .is-readonly When this state class is present, the radio button element is read-only.
.inputGroup__radioButton .is-disabled When this state class is present, the radio button element is disabled.
.inputGroup__radioButton .is-focused When this state class is present, the radio button element is focused.
.inputGroup__label .is-required Marks the following group of radio buttons as mandatory and adds a red asterisk after the radio button group label.

Select

Optional description text.
Optional description text.
<div class="inputGroup">
    <label for="flavour-select2" class="inputGroup__label">Choose a flavour:</label>

    <div class="selectWrapper">
        <select id="flavour-select2" class="inputGroup__select">
            <option value="">Please choose an option</option>
            <option value="raspberry">Raspberry</option>
            <option value="pineapple">Pineapple</option>
            <option value="physalis">Physalis</option>
            <option value="cherry">Cherry with a very very long text to make this item much longer than the select container it is sesiding in</option>
        </select>
    </div>

    <div class="inputGroup__description">
        Optional description text.
    </div>
</div>

<div class="inputGroup">
    <label for="flavour-select2disabled" class="inputGroup__label">Choose a flavour, disabled:</label>

    <div class="selectWrapper">
        <select id="flavour-select2disabled" class="inputGroup__select" disabled>
            <option value="">Please choose an option</option>
            <option value="raspberry" selected="selected">Raspberry, disabled though</option>
            <option value="pineapple">Pineapple</option>
            <option value="physalis">Physalis</option>
            <option value="cherry">Cherry</option>
        </select>
    </div>

    <div class="inputGroup__description">
        Optional description text.
    </div>
</div>

Select multiple

Optional description text.
Optional description text.
<div class="inputGroup">
    <label for="flavour-select" class="inputGroup__label">Choose multiple flavours:</label>

    <div class="selectWrapper--multiple">
        <select id="flavour-select" size="5" multiple="multiple" class="inputGroup__select">
            <option value="">Please choose one or more option(s)</option>
            <option value="raspberry">Raspberry</option>
            <option value="pineapple">Pineapple</option>
            <option value="physalis">Physalis</option>
            <option value="cherry" selected="selected">Cherry</option>
        </select>
    </div>

    <div class="inputGroup__description">
        Optional description text.
    </div>
</div>

<div class="inputGroup">
    <label for="flavour-selectDisabled" class="inputGroup__label">Choose multiple flavours, disabled:</label>

    <div class="selectWrapper--multiple">

        <select id="flavour-selectDisabled" size="5" multiple="multiple" class="inputGroup__select" disabled="disabled">
            <option value="">Please choose one or more option(s)</option>
            <option value="raspberry">Raspberry</option>
            <option value="pineapple">Pineapple</option>
            <option value="physalis">Physalis</option>
            <option value="cherry" selected="selected">Cherry</option>
        </select>
    </div>

    <div class="inputGroup__description">
        Optional description text.
    </div>
</div>
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top