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>