Icon

pam-Form-Inline can group a form control with a icon. To apply the icon on the right side use pam-Form-Inline="reverse".

Markup

Toggle example guides Toggle HTML markup

<form pam-Form>
    <div pam-Form-Inline>
        <label for="group-input" pam-Form-Icon>
            <div sg-mock-icon></div>
        </label>
        <input id="group-input" type="text" placeholder="Input group" pam-Form-Control>
    </div>
    <div pam-Form-Inline>
        <label for="group-select" pam-Form-Icon>
            <div sg-mock-icon></div>
        </label>
        <select id="group-select" pam-Form-Control>
            <option value="geek">Geek</option>
            <option value="nerd">Nerd</option>
            <option value="dork">Dork</option>
        </select>
    </div>
    <div pam-Form-Inline="reverse">
        <label for="group-input-reverse" pam-Form-Icon>
            <div sg-mock-icon></div>
        </label>
        <input id="group-input-reverse" type="text" placeholder="Input group" pam-Form-Control>
    </div>
</form>