Forms

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

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">
                <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>

State

Give users feedback related to form controls by using native or custom states.

Native

Add the native form attributes disabled, readonly and required to use native states with PAM forms.

Default styling

disabled

makes a input field disabled.

readonly

puts a input to a read-only state.

required

marks a input control as required.

Markup

<form pam-Form>
     <input type="text" placeholder="Input" value="[modifier attribute]" [modifier attribute]>
</form>

Custom

Use the pam-Form-State to apply custom form states success or danger.

Default styling

success

attribute marks a success state for the input.

danger

attribute marks a error state for the input.

Markup

<form pam-Form>
     <input type="text" placeholder="Input" value="[modifier attribute]" pam-Form-State="[modifier attribute]">
</form>

Size

Adjust size of input, select or textarea with pam-Form-Size.

Markup

<form pam-Form="stacked">
    <input pam-Form-Size="large" type="text" placeholder="Large">
    <input type="text" placeholder="Default">
    <input pam-Form-Size="small" type="text" placeholder="Small">
</form>

Width

Adjust width of input, select or textarea with pam-Form-Width which supports thirds and fifths.

Markup

<form pam-Form="stacked">
    <input pam-Form-Width="1-1" type="text" placeholder="1-1">
    <input pam-Form-Width="2-3" type="text" placeholder="2-3">
    <input pam-Form-Width="1-2" type="text" placeholder="1-2">
    <input pam-Form-Width="1-3" type="text" placeholder="1-3">
    <input pam-Form-Width="1-4" type="text" placeholder="1-4">
</form>

Layout

Form layout variations

Default

pam-Form sets up the base for forms and outputs a default inline form.

Markup

<form pam-Form>
    <input type="email" placeholder="Email">
    <input type="password" placeholder="Password">
    <input type="button" pam-Button value="Log in">
</form>

Stacked

pam-Form="stacked" changes form elements to blocks so that the output is a stacked form.

Markup

<form pam-Form="stacked">
   <label for="email">Email</label>
    <input type="email" placeholder="Email">
    <label for="password">Password</label>
    <input type="password" placeholder="Password">
    <input type="button" pam-Button value="Log in">
</form>

Grouped fields

pam-Fieldset combined with a <fieldset> element will group a set of form fields.

Markup

<form pam-Form>
    <fieldset pam-Fieldset="grouped">
        <input type="text" placeholder="Username">
        <input type="email" placeholder="Email">
        <input type="password" placeholder="Password">
    </fieldset>
    <fieldset pam-Fieldset="grouped">
        <input type="text" placeholder="Nickname">
        <input type="text" placeholder="City">
        <input type="text" placeholder="Favorite movie">
    </fieldset>
    <fieldset pam-Fieldset="actions">
        <input type="button" pam-Button="small" value="Log in">
    </fieldset>
</form>

Message

pam-Form-Message is a helper element that shows text under or on the side of a form field.

Block

The default message is a block element

Markup

<form pam-Form="stacked">
    <fieldset>
        <label>Username</label>
        <input type="text">
        <aside pam-Form-Message>Block help text</aside>
    </fieldset>
</form>

Inline

To display the message inline apply the inline value to pam-Form-Message.

Markup

<form pam-Form>
    <fieldset>
        <label>Username</label>
        <input type="text">
        <aside pam-Form-Message="inline">Block help text</aside>
    </fieldset>
</form>

Custom controls

There are group of custom controls to use which gives more flexibility and control over the form controls.

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

<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>

Lego

pam-Form-Group="lego" extend form controls by adding icons, buttons, selects before or after text-based form controls as lego bricks.

Markup

<form pam-Form>
    <div pam-Form-Group="lego">
        <div pam-Form-Group-Addon>
            <select>
                <option value="honda">+46</option>
                <option value="toyota">+211</option>
                <option value="nissan">+1-284</option>
            </select>
        </div>
        <input id="addon-lego-1" type="text" placeholder="One addon" pam-Form-Control>
    </div>
    <div pam-Form-Group="lego">
        <input id="addon-lego-2" type="text" placeholder="One addon" pam-Form-Control>
        <div pam-Form-Group-Addon>
            <input type="button" pam-Button="small" value="send">
        </div>
    </div>
    <div pam-Form-Group="lego">
        <div pam-Form-Group-Addon>
            <select>
                <option value="honda">+46</option>
                <option value="toyota">+211</option>
                <option value="nissan" selected>+1-284</option>
            </select>
        </div>
            <input id="addon-lego-3" type="text" placeholder="Two addons" pam-Form-Control>
        <div pam-Form-Group-Addon>
            <input type="button" pam-Button="small" value="send">
        </div>
    </div>
</form>

Lego block

pam-Form-Group="lego block" display lego brick as a block.

Markup

<form pam-Form>
    <div pam-Form-Group="lego block">
        <div pam-Form-Group-Addon>
            <select>
                <option value="honda">+46</option>
                <option value="toyota">+211</option>
                <option value="nissan">+1-284</option>
            </select>
        </div>
        <input id="addon-lego-block-1" type="text" placeholder="One addon" pam-Form-Control>
    </div>
    <div pam-Form-Group="lego block">
        <input id="addon-lego-block-2" type="text" placeholder="One addon" pam-Form-Control>
        <div pam-Form-Group-Addon>
            <input type="button" pam-Button="small" value="send">
        </div>
    </div>
    <div pam-Form-Group="lego block">
        <div pam-Form-Group-Addon>
            <select>
                <option value="honda">+46</option>
                <option value="toyota">+211</option>
                <option value="nissan" selected>+1-284</option>
            </select>
        </div>
            <input id="addon-lego-block-3" type="text" placeholder="Two addons" pam-Form-Control>
        <div pam-Form-Group-Addon>
            <input type="button" pam-Button="small" value="send">
        </div>
    </div>
</form>

Select

pam-Select turns on custom styling of the select element.

Markup

<form pam-Form="stacked">
    <label for="select-native">Native select</label>
    <select id="select-native">
        <option value="geek">Geek</option>
        <option value="nerd">Nerd</option>
        <option value="dork">Dork</option>
    </select>
    <label for="select-custom">Custom select</label>
    <select id="select-custom" pam-Select="">
        <option value="geek">Geek</option>
        <option value="nerd">Nerd</option>
        <option value="dork">Dork</option>
    </select>
    <label for="select-multiple">Multiple select</label>
    <select id="select-multiple" multiple>
        <option value="geek">Geek</option>
        <option value="nerd">Nerd</option>
        <option value="dork">Dork</option>
    </select>
</form>

Traits

pam-form-control is a generic trait to be used with form controls to optimize and trim their behaviour when needed.

Markup

<form pam-Form="stacked">
    <label for="input-borderless">So borderless!</label>
    <input id="input-borderless" placeholder="Borderless" pam-Form-Control="borderless">
    <label for="input-fluid">Fluid like water</label>
    <input id="input-fluid" placeholder="Fluid" pam-Form-Control="fluid">
</form>

Deprecated

Following form rulez will be deprecated in version 1.1.0.

Input borderless

pam-Input="borderless" removes the form field border.

Deprecated: Styling for borderless legacy form fields. Support will be dropped after PAM version 1.1.

Markup

<form pam-Form="stacked">
    <label for="borderless">Borderless input</label>
    <input id="borderless" type="text" placeholder="Borderless" pam-Input="borderless">
</form>

Input icon

pam-Input-Icon enables icons to be used with a input.

Deprecated: Styling for legacy input icons. Support will be dropped after PAM version 1.1.

Markup

<form pam-Form>
    <div pam-Input-Icon>
        <label for="icon">
        <img src="http://placehold.it/24x24">
        </label>
        <input id="icon" type="text" placeholder="Icon">
    </div>
</form>

Select box

pam-Select-Box turns of the platform native styling of select boxes and adds normalized styling for cross browser compatibility.

Deprecated: Support for select box styling will be dropped after PAM version 1.1. Use custom select instead `pam-Select`.

Default styling

multiple

enables the multi select box.

fluid

enables a select box with fluid width.

borderless

removes the select box borders.

Markup

<form pam-Form>
    <div pam-Select-Box="[modifier attribute]">
        <select>
            <option value="geek">Geek</option>
            <option value="nerd">Nerd</option>
            <option value="dork">Dork</option>
        </select>
    </div>
</form>

.hook-form .hook-form-focus .hook-form-disabled .hook-form-readonly .hook-form-readonly-focus .hook-form-focus-invalid .hook-form-focus-invalid-focus .hook-form-input-borderless .hook-form-input-borderless-focus .hook-form-select .hook-form-select-multiple .hook-form-select-focus .hook-form-select-custom .hook-form-label .hook-form-fieldset .hook-form-legend .hook-form-stacked .hook-form-group .hook-form-input-icon .hook-form-input-group .hook-select-box .hook-form-message .hook-form-message-inline .hook-form-state-success .hook-form-state-danger .hook-form-size-large .hook-form-size-small .hook-form-field-inline