Washington State Auditor's Office Communication and Design System

Simple Form: Inline 

<form class="o-form--inline">
    <h1 class="u-h5">Simple form -- inline</h1>

    <div class="o-form__field">
        <label class="o-form__label" for="example">First Name</label>
        <div class="o-form__input">
            <input class="c-input" name="example" type="text" placeholder="Placeholder text" />
        </div>
    </div>

    <div class="o-form__field">
        <label class="o-form__label" for="example">Last Name</label>
        <div class="o-form__input">
            <input class="c-input" name="example" type="text" placeholder="Placeholder text" />
        </div>
    </div>

    <div class="o-form__field">
        <label class="o-form__label">Favorite Superhero</label>
        <div class="o-form__input">
            <select class="c-dropdown ">
    <option value="">-- Select an option --</option>
    <option value="ironman">Ironman</option>
    <option value="hulk">Hulk</option>
    <option value="spiderman">Spiderman</option>
    <option value="captain america">Captain America</option>
    <option value="black pather">Black Pather</option>
    <option value="wonder woman">Wonder Woman</option>
    <option value="hawkeye">Hawkeye</option>
    <option value="black widow">Black Widow</option>
    <option value="deadpool">Deadpool</option>
    
</select>
        </div>
    </div>
    <div class="o-form__field">
        <div class="o-form__label">Favorite Color</div>

        <div class="o-form__input">

            <div class="c-radio-button">
                <input class="c-radio-button__input" type="radio" id="red" name="favorite_color" value="red" />
                <label class="c-radio-button__label" for="red">
        Red
    </label>
            </div>

            <div class="c-radio-button">
                <input class="c-radio-button__input" type="radio" id="blue" name="favorite_color" value="blue" />
                <label class="c-radio-button__label" for="blue">
        Blue
    </label>
            </div>

            <div class="c-radio-button">
                <input class="c-radio-button__input" type="radio" id="green" name="favorite_color" value="green" />
                <label class="c-radio-button__label" for="green">
        Green
    </label>
            </div>

            <div class="c-radio-button">
                <input class="c-radio-button__input" type="radio" id="yellow" name="favorite_color" value="yellow" />
                <label class="c-radio-button__label" for="yellow">
        Yellow
    </label>
            </div>

        </div>
    </div>

    <div class="o-form__field">
        <div class="o-form__label">Lucky Numbers</div>

        <div class="o-form__input">

            <div class="c-checkbox">
                <input class="c-checkbox__input" id="one" value="1" type="checkbox" />
                <label class="c-checkbox__label" for="one">
        One
    </label>
            </div>

            <div class="c-checkbox">
                <input class="c-checkbox__input" id="two" value="2" type="checkbox" />
                <label class="c-checkbox__label" for="two">
        Two
    </label>
            </div>

            <div class="c-checkbox">
                <input class="c-checkbox__input" id="three" value="3" type="checkbox" />
                <label class="c-checkbox__label" for="three">
        Three
    </label>
            </div>

            <div class="c-checkbox">
                <input class="c-checkbox__input" id="four" value="4" type="checkbox" />
                <label class="c-checkbox__label" for="four">
        Four
    </label>
            </div>

        </div>
    </div>

    <button class="c-button c-button--primary">
    Submit
</button>

    <button class="c-button">
    Cancel
</button>

</form>
 
<form class="o-form--inline">
    <h1 class="u-h5">Simple form -- inline</h1>

    {% render '@input--field', {label: 'First Name', placeholder: 'Fred'} %}
    {% render '@input--field', {label: 'Last Name', placeholder: 'Flinstone'} %}
    {% render '@dropdown--field', {
        label: 'Favorite Superhero',
        options: [
            'Ironman',
            'Hulk',
            'Spiderman',
            'Captain America',
            'Black Pather',
            'Wonder Woman',
            'Hawkeye',
            'Black Widow',
            'Deadpool'
        ]
    } %}
    {% render '@radio-button--field', {
        label: 'Favorite Color',
        name: 'favorite_color',
        buttons: [
            {
                label: 'Red',
                value: 'red',
                id: 'red'
            },
            {
                label: 'Blue',
                value: 'blue',
                id: 'blue'
            },
            {
                label: 'Green',
                value: 'green',
                id: 'green'
            },
            {
                label: 'Yellow',
                value: 'yellow',
                id: 'yellow'
            }
        ]
    } %}
    {% render '@checkbox--field', {
        label: 'Lucky Numbers',
        name: 'lucky_numbers',
        checkboxes: [
            {
                label: 'One',
                value: '1',
                id: 'one'
            },
            {
                label: 'Two',
                value: '2',
                id: 'two'
            },
            {
                label: 'Three',
                value: '3',
                id: 'three'
            },
            {
                label: 'Four',
                value: '4',
                id: 'four'
            }
        ]
    } %}
    {% render '@button--primary', { text: 'Submit' } %}
    {% render '@button', { text: 'Cancel' } %}
</form>
 
/* No context defined for this component. */

Simple Form implementations:

You can use any of the frameworks below with this component. Click here for framework integration instructions. Links follow to that framework’s documentation.

// For Kendo UI use:
import { SAOSimpleFormComponent } from '../..path/to../sao-patterns-kendo-angular';

// For DevExtreme use:
import { SAOSimpleFormComponent } from '../..path/to../sao-patterns-devextreme-angular';