Version 0.40.0

UI Molecules

Forms groups

Vertical form group (default)

Some form helper
Some form helper
<div class="sui-m-form-group">
        <label class="sui-a-form-label as--uppercase">Label</label>
        <div class="sui-a-form-helper">Some form helper</div>
        <select class="sui-a-form-control">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <input class="sui-a-form-control" />
        <label class="sui-a-form-check">
            <input type="checkbox" name="demo-checkbox-10">
            <span class="sui-a-form-check__indicator"></span>
            <span class="sui-a-form-check__label">Checkbox</span>
        </label>
        <div class="sui-a-form-feedback">
            <i class="sui-a-icon as--fa-info-circle"></i>
            This is a feedback about a part of the form.
        </div>
</div>

<div class="sui-m-form-group">
        ...
</div>

Horizontal form group

Some form helper
Some form helper
<div class="sui-m-form-group as--horizontal">
        ...
</div>

<div class="sui-m-form-group as--horizontal">
        ...
</div>

Form group with icon

Some form helper
Some form helper
<div class="sui-m-form-group">
    <div class="sui-m-form-group__icon">
        <i class="sui-a-icon as--fa-cube"></i>
    </div>
    <div class="sui-m-form-group__content">
        ...
    </div>
</div>

<div class="sui-m-form-group as--horizontal">
    <div class="sui-m-form-group__icon">
        <i class="sui-a-icon as--fa-cube"></i>
    </div>
    <div class="sui-m-form-group__content">
        ...
    </div>
</div>

Responsive

You can use Responsive modifiers for as--horizontal or as--vertical (default) modifiers.

Example
Some form helper
<div class="sui-m-form-group as--horizontal@xs as--vertical@sm as--horizontal@md">
        ...
</div>

Validations states

Some form helper
Some form helper
Some form helper
<div class="sui-m-form-group as--danger">
        ...
</div>

<div class="sui-m-form-group as--warning">
        ...
</div>

<div class="sui-m-form-group as--success">
        ...
</div>