Text fields

The text field comes in two varieties filled and outlined.

For the filled text field all you need to do is use the classes .text-field and .text-field--filled.

    
<div class="row">
    <div class="xs12">
        <div class="text-field text-field--filled">
            <input type="text" id="text-filled" class="text-field__input">
            <label class="text-field__label" for="text-filled">Label</label>
        </div>
    </div>

    <div class="xs12">
        <div class="text-field text-field--filled">
            <textarea id="textarea-filled" class="text-field__input"></textarea>
            <label class="text-field__label" for="textarea-filled">Label</label>
        </div>
    </div>

    <div class="xs12">
        <div class="text-field text-field--filled">
            <input type="date" id="date-filled" class="text-field__input">
            <label class="text-field__label" for="date-filled">Label</label>
        </div>
    </div>

    <div class="xs12">
        <div class="text-field text-field--filled">
            <input type="number" id="number-filled" class="text-field__input">
            <label class="text-field__label" for="number-filled">Label</label>
        </div>
    </div>

    <div class="xs12">
        <div class="text-field text-field--filled">
            <input type="text" id="disabled-filled" class="text-field__input" disabled>
            <label class="text-field__label" for="disabled-filled">Label</label>
        </div>
    </div>
</div>
    

For the outlined text field all you need to do is use the classes .text-field and .text-field--outlined.

    
<div class="row">
    <div class="xs12">
        <div class="text-field text-field--outlined">
            <input type="text" id="text-outlined" class="text-field__input">
            <label class="text-field__label" for="text-outlined">Label</label>
        </div>
    </div>

    <div class="xs12">
        <div class="text-field text-field--outlined">
            <textarea id="textarea-outlined" class="text-field__input"></textarea>
            <label class="text-field__label" for="textarea-outlined">Label</label>
        </div>
    </div>

    <div class="xs12">
        <div class="text-field text-field--outlined">
            <input type="date" id="date-outlined" class="text-field__input">
            <label class="text-field__label" for="date-outlined">Label</label>
        </div>
    </div>

    <div class="xs12">
        <div class="text-field text-field--outlined">
            <input type="number" id="number-outlined" class="text-field__input">
            <label class="text-field__label" for="number-outlined">Label</label>
        </div>
    </div>

    <div class="xs12">
        <div class="text-field text-field--outlined">
            <input type="text" id="disabled-outlined" class="text-field__input" disabled>
            <label class="text-field__label" for="disabled-outlined">Label</label>
        </div>
    </div>
</div>