# Forms

Most features in Xena rely on user input. The most used layout for forms in Xena is the form-horizontal. Please note the classes to make the form responsive.

## Label

![Standard form with help text.](https://3101502904-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZdybBvJaAboIV6zNHC%2F-LZoJ_7vzAOV7_rC9Ojn%2F-LZoJgJTW-VHh7fi6TuV%2Fform_standard.PNG?generation=1551361043400643\&alt=media)

```markup
<div class="form-horizontal">
    <div class="form-group">
        <div class="col-xs-12 col-sm-4"><label class="control-label" for="input1">Label</label></div>
        <div class="col-xs-12 col-sm-8">
            <input type="text" class="form-control" id="input1">
            <p class="help-block">Helping text.</p>
        </div>
    </div>
</div>
```

Form input with an **illustrative icon**.

![Form with illustrating icon.](https://3101502904-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZdybBvJaAboIV6zNHC%2F-LZoJ_7vzAOV7_rC9Ojn%2F-LZoJgJV1kaCinna2Jmo%2Fform_icon.PNG?generation=1551361042980831\&alt=media)

```markup
 <div class="form-horizontal">
    <div class="form-group">
        <div class="col-xs-12 col-sm-4"><label class="control-label" for="input2">Label</label></div>
        <div class="col-xs-12 col-sm-8">
            <div class="input-icon-group">
                <input type="text" class="form-control" id="input2">
                <span class="input-icon"><i class="fas fa-search"></i></span>
            </div>
        </div>
    </div>
</div>
```

Form input with an illustrative icon and **link add-on**.

![Form with illustrating icon and an inline link.](https://3101502904-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZdybBvJaAboIV6zNHC%2F-LZoJ_7vzAOV7_rC9Ojn%2F-LZoJgJX6cETs0_UpdJZ%2Fform_icon-label.PNG?generation=1551361043923825\&alt=media)

```markup
<div class="form-horizontal">
    <div class="form-group">
        <div class="col-xs-12 col-sm-4"><label class="control-label" for="input3">Label</label></div>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input type="text" class="form-control" id="input3">
                <span class="input-icon"><i class="fas fa-search"></i></span>
                <a href="#" class="input-group-addon"><i class="fas fa-plus"></i></a>
            </div>
        </div>
    </div>
</div>
```

Form input with an illustrative icon and **button add-on**.

![Form with illustrating icon and an inline button.](https://3101502904-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZdybBvJaAboIV6zNHC%2F-LZoJ_7vzAOV7_rC9Ojn%2F-LZoJgJZG4-0-PNErz0U%2Fform_icon-button.PNG?generation=1551361041794388\&alt=media)

```markup
 <div class="form-horizontal">
    <div class="form-group">
        <div class="col-xs-12 col-sm-4"><label class="control-label" for="input4">Label</label></div>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input type="text" class="form-control" id="input4">
                <span class="input-icon"><i class="fas fa-search"></i></span>
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default">Button</button>
                </div>
            </div>
        </div>
    </div>
</div>
```

The above additions can be used in different combinations.

### Input group

![Multiple form inputs in one group.](https://3101502904-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZdybBvJaAboIV6zNHC%2F-LZoJ_7vzAOV7_rC9Ojn%2F-LZoJgJaJPLGAPXjvtaT%2Fform_inputgroup.PNG?generation=1551361040299764\&alt=media)

```markup
 <div class="form-horizontal">
    <div class="form-group">
        <div class="col-xs-12 col-sm-4"><label class="control-label" for="input10">Label</label></div>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input type="text" class="form-control" id="input10" placeholder="Start">
                <span class="input-group-addon">-</span>
                <input type="text" class="form-control" id="input11" placeholder="End">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default">Button</button>
                </div>
            </div>
        </div>
    </div>
</div>
```

### Complex forms

Some form groups contains multiple inputs, like a delivery address. Notice the following example uses form-group-multiple, input-pair and control-container to handle this situation.

![Complex form](https://3101502904-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZdybBvJaAboIV6zNHC%2F-LZoJ_7vzAOV7_rC9Ojn%2F-LZoJgJcu0Rvra6zz9rp%2Fform_complex.PNG?generation=1551361040715323\&alt=media)

```markup
<div class="form-horizontal">
    <div class="form-group form-group-multiple">
        <div class="col-xs-12 col-sm-4"><label class="control-label" for="input20">Delivery address</label></div>
        <div class="col-xs-12 col-sm-8">
            <input type="text" class="form-control" id="input20" placeholder="Name">
            <input type="text" class="form-control" id="input21" placeholder="Address">
            <div class="input-pair">
                <div class="control-container col-xs-4">
                    <input type="text" class="form-control" id="input22" placeholder="Zip">
                </div>
                <div class="control-container col-xs-8">
                    <input type="text" class="form-control" id="input23" placeholder="City">
                </div>
            </div>
            <select id="input24" class="form-control">
                <option>Denmark</option>
            </select>
        </div>
    </div>
</div>
```

Another situation: Different filers and search features. Here we often use form-inline.

![Inline form.](https://3101502904-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZdybBvJaAboIV6zNHC%2F-LZoJ_7vzAOV7_rC9Ojn%2F-LZoJgJe3w2mauzzpHPt%2Fform_inline.PNG?generation=1551361042436955\&alt=media)

```markup
<div class="form-inline">
    <div class="form-group">
        <input type="text" class="form-control" id="input30" placeholder="Search">
    </div>
    <div class="form-group">
        <select id="input31" class="form-control">
            <option>Denmark</option>
        </select>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> Show disabled
        </label>
    </div>
</div>
```

### Other inputs

#### checkbox

![Checkboxes.](https://3101502904-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZdybBvJaAboIV6zNHC%2F-LZoJ_7vzAOV7_rC9Ojn%2F-LZoJgJg1vign5SbyQh0%2Fform_checkboxes.PNG?generation=1551361041383003\&alt=media)

```markup
<div class="form-horizontal">
    <div class="form-group">
        <div class="col-xs-12 col-sm-4"><label class="control-label">Checkboxes</label></div>
        <div class="col-xs-12 col-sm-8">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Label text
                </label>
            </div>
            <div class="checkbox disabled">
                <label>
                    <input type="checkbox" disabled> Disabled
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-12 col-sm-4"><label class="control-label">Checkboxes inline</label></div>
        <div class="col-xs-12 col-sm-8">
            <label class="checkbox-inline">
                <input type="checkbox"> Label text
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" disabled> Disabled
            </label>
        </div>
    </div>
</div>
```

#### Radiobuttons

![Radio buttons.](https://3101502904-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZdybBvJaAboIV6zNHC%2F-LZoJ_7vzAOV7_rC9Ojn%2F-LZoJgJiv6IuBoFeB5aZ%2Fform_radiobuttons.PNG?generation=1551361041957770\&alt=media)

```markup
<div class="form-horizontal">
    <div class="form-group">
        <div class="col-xs-12 col-sm-4"><label class="control-label">Radiobuttons</label></div>
        <div class="col-xs-12 col-sm-8">
            <div class="radio">
                <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios1" checked> Option one
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios2"> Option two
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-12 col-sm-4"><label class="control-label">Radiobuttons inline</label></div>
        <div class="col-xs-12 col-sm-8">
            <label class="radio-inline">
                <input type="radio" name="optionsRadios2" id="optionsRadios1" checked> Option one
            </label>
            <label class="radio-inline">
                <input type="radio" name="optionsRadios2" id="optionsRadios2"> Option two
            </label>
        </div>
    </div>
</div>
```