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

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]" [modifier]>
</form>

Custom

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

Default styling

success

attribute marks a success state for the input.

error

attribute marks a error state for the input.

Markup

<form pam-Form>
     <input type="text" placeholder="Input" value="[modifier]" pam-Form-State="[modifier]">
</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>

.hook-form .hook-form-focus .hook-form-disabled .hook-form-hover .hook-form-readonly .hook-form-readonly-focus .hook-form-focus-invalid .hook-form-focus-invalid-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-group .hook-form-message .hook-form-message-inline .hook-form-state-success .hook-form-state-error .hook-form-size-large .hook-form-size-small .hook-form-field-inline

Variables

These are all the component specific variables that can be used for customization.

Name	Value
@form-background	`@skin-white`
@form-border-radius	`@border-radius`
@form-border-style	`solid`
@form-border-width	`1px`
@form-border-color	`@skin-border-primary`
@form-color	`@skin-text-primary-on-light`
@form-font-size	`@font-size-large`
@form-line-height	`@line-height-base`
@form-margin	`0 0 @space-8`
@form-padding-horizontal	`@space-8`
@form-padding-vertical	`@space-8`
@form-padding	`@space-8`
@form-placeholder-color	`@skin-text-secondary-on-light`
@form-tap-highlight-color	`rgba(0, 0, 0, 0)`
@form-transition-duration	`@transition-duration-default`
@form-transition-property	`border`
@form-transition-timing	`ease`
@form-focus-border-color	`@skin-primary`
@form-focus-border-width	`1px`
@form-hover-border-color	`darken(@form-border-color, 30%)`
@form-hover-border-width	`1px`
@form-legend-width	`100%`
@form-legend-padding	`@space-8 0`
@form-fieldset-border	`0`
@form-fieldset-margin	`0`
@form-fieldset-padding	`@space-8 0 @space-16`
@form-fieldset-column-padding	`@space-16`
@form-label-margin	`@space-8 0`
@form-success-background	`lighten(@skin-success, 45%)`
@form-success-border	`@skin-success`
@form-success-color	`@skin-success`
@form-error-background	`lighten(@skin-error, 40%)`
@form-error-border	`@skin-error`
@form-error-color	`@skin-error`
@form-stacked-display	`block`
@form-stacked-margin	`@space-8 0`
@form-fieldset-grouped-padding-bottom	`@space-16`
@form-fieldset-grouped-last-padding-bottom	`@space-24`
@form-fieldset-grouped-input-display	`block`
@form-fieldset-grouped-input-last-margin-bottom	`0`
@form-fieldset-grouped-input-position	`relative`
@form-message-color	`@skin-text-primary-on-light`
@form-message-display	`block`
@form-message-font-size	`@font-size-xsmall`
@form-message-inline-display	`inline-block`
@form-message-inline-padding	`0 0 0 @space-8`
@form-message-inline-vertical-align	`middle`
@form-field-inline-margin	`0 0 @space-8`
@form-field-inline-position	`relative`
@form-field-inline-control-display	`block`
@form-field-inline-control-padding-left	`@space-48`
@form-field-inline-control-width	`100%`
@form-field-inline-icon-align-items	`center`
@form-field-inline-icon-background	`transparent`
@form-field-inline-icon-bottom	`0`
@form-field-inline-icon-display	`inline-flex`
@form-field-inline-icon-justify-content	`center`
@form-field-inline-icon-left	`0`
@form-field-inline-icon-margin	`0`
@form-field-inline-icon-position	`absolute`
@form-field-inline-icon-right	`auto`
@form-field-inline-icon-top	`0`
@form-field-inline-icon-width	`@space-48`
@form-field-inline-reverse-control-padding-left	`@space-8`
@form-field-inline-reverse-control-padding-right	`@space-48`
@form-field-inline-reverse-control-padding-width	`100%`
@form-field-inline-reverse-icon-left	`auto`
@form-field-inline-reverse-icon-right	`0`
@form-group-lego-display	`inline-flex`
@form-group-lego-margin-bottom	`@space-16`
@form-group-lego-child-all-margin-bottom	`0`
@form-group-lego-child-all-min-width	`@space-60`
@form-group-lego-child-display	`flex`
@form-group-lego-child-last-border-bottom-left-radius	`0`
@form-group-lego-child-last-border-top-left-radius	`0`
@form-group-lego-child-first-all-border-bottom-right-radius	`0`
@form-group-lego-child-first-all-border-top-right-radius	`0`
@form-group-lego-child-first-border-bottom-right-radius	`0`
@form-group-lego-child-first-border-top-right-radius	`0`
@form-group-lego-child-last-all-border-bottom-left-radius	`0`
@form-group-lego-child-last-all-border-top-left-radius	`0`
@form-group-lego-child-not-first-last-radius	`0`
@form-group-lego-addon-border-radius	`@form-border-radius`
@form-group-lego-addon-color	`@form-color`
@form-group-lego-addon-font-size	`@font-size-base`
@form-group-lego-addon-margin	`0`
@form-group-lego-addon-min-width	`@space-60`
@form-group-lego-addon-position	`relative`
@form-group-lego-addon-text-align	`center`
@form-group-lego-addon-white-space	`nowrap`
@form-group-lego-addon-first-all-border-right-color	`transparent`
@form-group-lego-addon-first-all-focus-border-right-color	`@form-focus-border-color`
@form-group-lego-addon-last-all-border-left-color	`transparent`
@form-group-lego-addon-last-all-focus-border-left-color	`@form-focus-border-color`
@form-group-lego-control-focus-zindex	`3`
@form-group-lego-control-margin-bottom	`0`
@form-group-lego-control-position	`0`
@form-group-lego-control-zindex	`2`
@form-group-lego-block-display	`flex`
@form-select-custom-appearance	`none`
@form-select-custom-background-color	`@form-background`
@form-select-custom-background-image	`"data:image/svg+xml`
@form-select-custom-background-offset	`@space-8`
@form-select-custom-background-repeat	`no-repeat`
@form-select-custom-background-size	`@space-12`
@form-select-custom-display	`inline-block`
@form-select-custom-max-width	`100%`
@form-select-custom-padding-right	`@space-28`
@form-select-custom-vertical-align	`middle`
@form-control-borderless-border-color-focus	`transparent`
@form-control-borderless-border-color	`transparent`
@form-control-borderless-focus-box-shadow	`0 1px 3px @skin-gray-600`
@form-control-borderless-transition	`box-shadow 0.3s ease`
@form-control-fluid-width	`100%`
@form-control-padded-medium-screen-size-padding	`@space-16`
@form-control-padded-padding	`@space-8 0 @space-16`