Forms

Combine various forms, form control selectors, custom components and layout variations to create forms that covers a wide range of use cases.

Text and select
Checkboxes
Misc
Markup

Toggle example guides Toggle HTML markup

<form pam-Form="stacked padded">
    <div pam-Grid>
        <div pam-Unit="1-1 medium:1-2">
            <fieldset pam-Fieldset="column">
                <legend>Text and select</legend>
                <label for="input-name">Name</label>
                <input id="input-name" type="text" placeholder="What is it?" pam-Form-Control="fluid" pam-skin="on:primary">
                <label for="input-email">Email</label>
                <input id="input-email" type="email" placeholder="Spam time" pam-Form-Control="fluid">
                <label for="input-password">Password</label>
                <input id="input-password" type="password" placeholder="A secret..." pam-Form-Control="fluid">
                <label for="select-geek">Choose geek level</label>
                <select id="select-geek" pam-Form-Control="fluid">
                    <option value="geek">Geek</option>
                    <option value="nerd">Nerd</option>
                    <option value="dork">Dork</option>
                </select>
                <label for="textarea-description">Please explain</label>
                <textarea rows="5" placeholder="The secret of 42..." pam-Form-Control="fluid"></textarea>
            </fieldset>
        </div>
        <div pam-Unit="1-1 medium:1-2">
            <fieldset pam-Fieldset="column">
                <legend>Checkboxes</legend>
                <label>
                    <input type="checkbox" value=""> I´m a hipster
                </label>
                <label>
                    <input type="radio" id="radio1" name="optionsRadios" value="radios" checked> Hipster
                </label>
                <label>
                    <input type="radio" id="radio2" name="optionsRadios" value="radios"> Geek
                </label>
            </fieldset>
            <fieldset>
                <legend>Misc</legend>
                <label for="input-file">File</label>
                <input id="input-file" type="file" pam-Form-Control="fluid">
                <label for="input-color">Color</label>
                <input id="input-color" type="color" pam-Form-Control="fluid">
            </fieldset>
        </div>
    </div>
</form>