Archived version of the User Experience Toolkit for Insights Hub and Industrial IoT website, version 2.8.1

# Form group

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

## Form group

This is a fieldset title
Label
Optional description.
Label
Optional description.
Text input label
Optional description.
Text input label
Optional text input description, at least one sentence.
Text input label
Optional text input description, at least one sentence.
Label
Optional text input description, at least one sentence.
Label
Optional text input description, at least one sentence.
Optional label for group of radio buttons
Option 01
Option 02
Option 03 with a very very long label which can wrap
Optional label for group of checkbox buttons
Option 01 with a very very long label which can wrap
Option 02
Option 03
Optional text input description, at least one sentence.
Label
Optional text input description, at least one sentence.
Choose an idol:

    <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 class="inputGroup__description">
                        Optional text input description, at least one sentence.
                    </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

Element | Class | Description
--- | --- | ---
`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`

## Input group sizes

- Form elements

Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top