Form group

This chapter shows how to integrate different form elements to compose a form.

Form group

This is a fieldset title
Optional description.
Optional description.
Optional description.
Optional text input description, at least one sentence.
Optional text input description, at least one sentence.
Optional text input description, at least one sentence.
Optional text input description, at least one sentence.
Optional text input description, at least one sentence.
<form novalidate="" autocomplete="off" class="form">
    <fieldset>
        <legend>This is a fieldset title</legend>
        <div class="form__formGroup">
            <div class="inputGroup inputGroup--xxsmall">
                <label class="inputGroup__label"  for="text-input10">
                    Label
                </label>
                <input class="inputGroup__textInput" type="text" placeholder="xxs" id="text-input10" />
                <div class="inputGroup__description">
                    Optional description.
                </div>
            </div>

            <div class="inputGroup inputGroup--xsmall">
                <label class="inputGroup__label"  for="text-input11">
                    Label
                </label>
                <input class="inputGroup__textInput"  type="text" placeholder="xs" id="text-input11" />
                <div class="inputGroup__description">
                    Optional description.
                </div>
            </div>

            <div class="inputGroup inputGroup--small">
                <label class="inputGroup__label"  for="text-input12">
                    Text input label
                </label>
                <input class="inputGroup__textInput" type="text" placeholder="s" id="text-input12" />
                <div class="inputGroup__description">
                    Optional description.
                </div>
            </div>

            <div class="inputGroup inputGroup--smallmedium">
                <label class="inputGroup__label"  for="text-input13">
                    Text input label
                </label>
                <input class="inputGroup__textInput" type="text" placeholder="sm" id="text-input13" />
                <div class="inputGroup__description">
                    Optional text input description, at least one sentence.
                </div>
            </div>

            <div class="inputGroup inputGroup--medium">
                <label class="inputGroup__label"  for="text-input14">
                    Text input label
                </label>
                <input class="inputGroup__textInput" type="text" placeholder="inputGroup--medium" id="text-input14" />
                <div class="inputGroup__description">
                    Optional text input description, at least one sentence.
                </div>
            </div>
        </div>

        <div class="form__formGroup">
            <div class="inputGroup inputGroup--mediumlarge">
                <label class="inputGroup__label"  for="text-input15">
                    Label
                </label>
                <input class="inputGroup__textInput" type="text" placeholder="inputGroup--mediumlarge" id="text-input15" />
                <div class="inputGroup__description">
                    Optional text input description, at least one sentence.
                </div>
            </div>

            <div class="form__lineBreak"></div>

            <div class="inputGroup inputGroup--large">
                <label class="inputGroup__label"  for="text-input16">
                    Label
                </label>
                <input class="inputGroup__textInput"  type="text" placeholder="inputGroup--large" id="text-input16" />
                <div class="inputGroup__description">
                    Optional text input description, at least one sentence.
                </div>
            </div>
        </div>

        <div class="form__formGroup">
            <div class="inputGroup inputGroup--medium">
                <label class="inputGroup__label is-required" for="radio-button11">
                    Optional label for group of radio buttons
                </label>

                <div class="radioButtonWrapper">
                    <input type="radio" class="inputGroup__radioButton" id="radio-button11" name="radio-buttons-A" value="Option 01" checked />
                    <label for="radio-button11">Option 01</label>
                </div>

                <div class="radioButtonWrapper">
                    <input type="radio" class="inputGroup__radioButton" id="radio-button12" name="radio-buttons-A" value="Option 02" />
                    <label for="radio-button12">Option 02</label>
                </div>

                <div class="radioButtonWrapper">
                    <input type="radio" class="inputGroup__radioButton" id="radio-button13" name="radio-buttons-A" value="Option 03" />
                    <label for="radio-button13">Option 03 with a very very long label which can wrap</label>
                </div>

            </div>

            <div class="inputGroup inputGroup--medium">
                <label class="inputGroup__label is-required" for="checkbox-button12">
                    Optional label for group of checkbox buttons
                </label>

                <div class="radioButtonWrapper">
                    <input type="checkbox" class="inputGroup__radioButton" id="checkbox-button12" name="checkbox-buttons-A" value="Option 01" checked />
                    <label for="checkbox-button12">Option 01 with a very very long label which can wrap</label>
                </div>

                <div class="radioButtonWrapper">
                    <input type="checkbox" class="inputGroup__radioButton" id="checkbox-button13" name="checkbox-buttons-A" value="Option 02" />
                    <label for="checkbox-button13">Option 02</label>
                </div>

                <div class="radioButtonWrapper">
                    <input type="checkbox" class="inputGroup__radioButton" id="checkbox-button14" name="checkbox-buttons-A" value="Option 03" />
                    <label for="checkbox-button14">Option 03</label>
                </div>

            </div>

            <div class="inputGroup inputGroup--mediumlarge">
                <label class="inputGroup__label"  for="text-input17">
                    Label
                </label>
                <input class="inputGroup__textInput" type="text" placeholder="inputGroup--mediumlarge" id="text-input17" />
                <div class="inputGroup__description">
                    Optional text input description, at least one sentence.
                </div>
            </div>

            <div class="inputGroup inputGroup--medium">
                <label for="idol-select22" class="inputGroup__label">Choose an idol:</label>
                <div class="selectWrapper">
                    <select id="idol-select22" class="inputGroup__select">
                        <option value="">Please choose an option</option>
                        <option value="indy">Indiana Jones</option>
                        <option value="james">James Bond</option>
                        <option value="guybrush">Guybrush Threepwood</option>
                        <option value="harry">Harry Potter</option>
                    </select>
                </div>
            </div>
        </div>
    </fieldset>
</form>

Usage

ElementClassDescription
div .form__lineBreak As elements in a form group are placed next to each other, a separate div element with this class allows a line break.
.inputGroup__label .is-required Marks the form element as a required field with a red asterisk after the label.
.inputGroup .inputGroup--<size> Sets the size/width of the input group (no dependencies with breakpoints).

The following values are possible, please see graphic below for detailed pixel values:
  • .inputGroup--xxsmall
  • .inputGroup--xsmall
  • .inputGroup--small
  • .inputGroup--smallmedium
  • .inputGroup--medium
  • .inputGroup--mediumlarge
  • .inputGroup--large
All possible min-widths for input fields
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top