Each variation will be presented in the following sections.
The form component is a complete solution for your forms. It provides
Veams >= v5.0.0 - Veams Framework.Type: boolean | Default: false
Submit form on page load.
Type: boolean | Default: true
Submit form on change.
Type: string | Default: null
Optional class to be set while fetching data from server.
Type: string | Default: 'is-success'
Class to be set after data was fetched successfully.
Type: string | Default: 'is-error'
Class to be set after fetching data failed for some reason.
{
"variations": {
"default": {
"docs": {
"variationName": "Fields"
},
"settings": {
"formClasses": "is-form",
"formContextClass": "default",
"formJsOptions": [
{
"optionsKey": "submitOnChange",
"optionsValue": false,
"optionsObject": true
}
],
"formAction": "ajax/test.html",
"formMethod": "GET",
"formAjax": true
},
"content": {
"formTitle": "Nullam mollis varius cursus.",
"fieldsets": [
{
"settings": {
"fieldsetClasses": "is-small",
"legendClasses": "is-col-mobile-p-12"
},
"content": {
"legend": "Checkboxes",
"rows": [
{
"settings": {
"rowClasses": "is-grid-row"
},
"content": {
"cols": [
{
"settings": {
"colClasses": "is-grid-col is-col-tablet-p-4",
"typeOf": "checkbox",
"required": false,
"inputClasses": "is-checkboxes"
},
"content": {
"checkboxes": [
{
"settings": {
"wrapperClass": "is-wrapper",
"inputClass": false,
"required": false,
"dataAttr": false,
"id": "check-01",
"labelClasses": "is-label"
},
"content": {
"label": "It is a paradisematic country, in which roasted parts of sentences fly into your mouth."
}
}
]
}
},
{
"settings": {
"colClasses": "is-grid-col is-col-tablet-p-4",
"typeOf": "checkbox",
"required": false,
"inputClasses": "is-checkboxes"
},
"content": {
"checkboxes": [
{
"settings": {
"wrapperClass": "is-wrapper",
"inputClass": false,
"required": false,
"dataAttr": false,
"id": "check-02",
"labelClasses": "is-label"
},
"content": {
"label": "Separated they live in Bookmarksgrove right at the coast of the Semantics..."
}
}
]
}
},
{
"settings": {
"colClasses": "is-grid-col is-col-tablet-p-4",
"typeOf": "checkbox",
"required": false,
"inputClasses": "is-checkboxes"
},
"content": {
"checkboxes": [
{
"settings": {
"wrapperClass": "is-wrapper",
"inputClass": false,
"required": false,
"dataAttr": false,
"id": "check-03",
"labelClasses": "is-label"
},
"content": {
"label": "Far far away, behind the word mountains..."
}
}
]
}
}
]
}
}
]
}
},
{
"settings": {
"fieldsetClasses": "is-small",
"legendClasses": "is-col-mobile-p-12"
},
"content": {
"legend": "Date & Datepicker",
"rows": [
{
"settings": {
"rowClasses": "is-grid-row"
},
"content": {
"cols": [
{
"settings": {
"colClasses": "is-grid-col is-col-tablet-p-4",
"id": "date",
"inputClasses": "is-date",
"required": false,
"type": "date",
"typeOf": "input"
},
"content": {
"label": "Label for date"
}
},
{
"settings": {
"colClasses": "is-grid-col is-col-tablet-p-4",
"id": "datepicker",
"inputClasses": "is-datepicker",
"required": false,
"type": "text",
"typeOf": "datepicker"
},
"content": {
"label": "Label for datepicker",
"placeholder": "01.01.2017"
}
}
]
}
}
]
}
},
{
"settings": {
"fieldsetClasses": "is-small",
"legendClasses": "is-col-mobile-p-12"
},
"content": {
"legend": "Differen Input Types",
"rows": [
{
"settings": {
"rowClasses": "is-grid-row"
},
"content": {
"cols": [
{
"settings": {
"colClasses": "is-grid-col is-col-tablet-p-4",
"id": "button",
"inputClasses": "is-btn",
"required": false,
"type": "button",
"typeOf": "input",
"attributes": [
{
"attrKey": "value",
"attrValue": "Submit"
}
]
},
"content": {
"label": "Label for button input"
}
},
{
"settings": {
"colClasses": "is-grid-col is-col-tablet-p-4",
"id": "email",
"required": false,
"type": "email",
"typeOf": "input"
},
"content": {
"label": "Label for email input",
"placeholder": "max@mustermann.de"
}
},
{
"settings": {
"colClasses": "is-grid-col is-col-tablet-p-4",
"id": "file",
"required": false,
"type": "file",
"typeOf": "input"
},
"content": {
"label": "Label for file input"
}
},
{
"settings": {
"colClasses": "is-grid-col is-col-tablet-p-4",
"id": "number",
"required": false,
"type": "number",
"typeOf": "input"
},
"content": {
"label": "Label for number input"
}
},
{
"settings": {
"colClasses": "is-grid-col is-col-tablet-p-4",
"id": "password",
"required": false,
"type": "password",
"typeOf": "input"
},
"content": {
"label": "Label for password input",
"placeholder": "Password"
}
},
{
"settings": {
"colClasses": "is-grid-col is-col-tablet-p-4",
"id": "range",
"required": false,
"type": "range",
"typeOf": "input"
},
"content": {
"label": "Label for range input"
}
},
{
"settings": {
"colClasses": "is-grid-col is-col-tablet-p-4",
"id": "tel",
"required": false,
"type": "tel",
"typeOf": "input"
},
"content": {
"label": "Label for tel input",
"placeholder": "12312312"
}
},
{
"settings": {
"colClasses": "is-grid-col is-col-tablet-p-4",
"id": "text",
"required": false,
"type": "text",
"typeOf": "input"
},
"content": {
"label": "Label for text input",
"placeholder": "Simple Placeholder"
}
},
{
"settings": {
"colClasses": "is-grid-col is-col-tablet-p-4",
"id": "time",
"required": false,
"type": "time",
"typeOf": "input"
},
"content": {
"label": "Label for time input"
}
},
{
"settings": {
"colClasses": "is-grid-col is-col-tablet-p-4",
"id": "url",
"required": false,
"type": "url",
"typeOf": "input"
},
"content": {
"label": "Label for url input",
"placeholder": "http://www.veams.org/"
}
}
]
}
}
]
}
},
{
"settings": {
"fieldsetClasses": "is-small",
"legendClasses": "is-col-mobile-p-12"
},
"content": {
"legend": "Radio Buttons",
"rows": [
{
"settings": {
"rowClasses": "is-grid-row"
},
"content": {
"cols": [
{
"settings": {
"colClasses": "is-grid-col is-col-tablet-p-4",
"inputClasses": "is-radios",
"id": "radios",
"required": false,
"typeOf": "radio"
},
"content": {
"label": "Label for radio buttons",
"radios": [
{
"settings": {
"wrapperClass": "is-radio-wrapper",
"inputClass": false,
"required": false,
"dataAttr": false,
"id": "radio-01",
"labelClasses": "is-label"
},
"content": {
"label": "Radio 01"
}
},
{
"settings": {
"wrapperClass": "is-radio-wrapper",
"inputClass": false,
"required": false,
"dataAttr": false,
"id": "radio-02",
"labelClasses": "is-label"
},
"content": {
"label": "Radio 02"
}
}
]
}
}
]
}
}
]
}
},
{
"settings": {
"legendClasses": "is-col-mobile-p-12"
},
"content": {
"legend": "Textarea",
"rows": [
{
"settings": {
"rowClasses": "is-grid-row"
},
"content": {
"cols": [
{
"settings": {
"colClasses": "is-grid-col is-col-tablet-p-4",
"inputClasses": "is-textarea",
"id": "textarea",
"required": false,
"typeOf": "textarea"
},
"content": {
"label": "Label for textarea",
"placeholder": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia..."
}
}
]
}
}
]
}
},
{
"settings": {
"legendClasses": "is-col-mobile-p-12"
},
"content": {
"legend": "Submit",
"rows": [
{
"settings": {
"rowClasses": "is-grid-row"
},
"content": {
"cols": [
{
"settings": {
"colClasses": "is-grid-col is-col-tablet-p-4",
"inputClasses": "is-submit",
"id": "submit",
"required": false,
"typeOf": "submit",
"disabled": true
},
"content": {
"label": "Label for submit",
"formSubmit": "Send"
}
}
]
}
}
]
}
}
]
}
}
}
}
{{! wrapWith START: Form }}
{{#wrapWith "c-form" settings=settings}}
{{#each content.fieldsets}}
{{> c-form__fieldset}}
{{/each}}
{{/wrapWith}}
{{! wrapWith END: Form}}
{{! ---
component: form
============================================
Options:
- options {Object} - Contains all options
- options.context {String} - Context class
- options.classes {String} - Modifier classes
- options.action {String} - Form action
- options.method {String} - Form method
- options.ajax {Boolean} - Init form module
Important Notes:
This component is written as wrapWith template, so you have the possibility to place your custom content.
--- }}
<form class="c-form{{#if options.settings.formContextClass}}--{{options.settings.formContextClass}}{{else}}--default{{/if}}
{{#if options.settings.formClasses}} {{options.settings.formClasses}}{{/if}}"
action="/{{@root.metadata.country}}/{{@root.metadata.lang}}{{options.settings.formAction}}"
method="{{options.settings.formMethod}}"
data-css="c-form"
{{#if options.settings.formAjax}}
data-js-module="form-ajax"
{{#if options.settings.formJsOptions}} data-js-options='{
{{#each options.settings.formJsOptions}}"{{optionsKey}}": {{#unless optionsObject}}"{{/unless}}{{{optionsValue}}}{{#unless optionsObject}}"{{/unless}}{{#if @last}}{{else}}, {{/if}}{{/each}}
}'{{/if}}
{{/if}}>
{{{yield}}}
</form>
<div class="form__checkbox">
<div class="form__label-wrapper{{#if settings.labelClasses}} {{settings.labelClasses}}{{/if}}">
<strong class="form__checkbox-legend">{{content.label}}</strong>
</div>
<div class="form__checkbox-wrapper">
{{#if content.headline}}
<h2 class="form__checkbox-headline">{{content.headline}}</h2>
{{/if}}
{{#each content.checkboxes}}
{{> c-form__checkbox-item required=../settings.required}}
{{/each}}
</div>
</div>
<fieldset class="form__fieldset{{#if settings.fieldsetClasses}} {{settings.fieldsetClasses}}{{/if}}">
{{#if content.legend}}
<legend class="form__legend{{#if settings.legendClasses}} {{settings.legendClasses}}{{/if}}">
{{content.legend}}
{{#if content.requiredNote}}
<em class="form__required-note">{{content.requiredNote}}</em>
{{/if}}
</legend>{{/if}}
{{#each content.rows}}
{{>c-form__row this}}
{{/each}}
</fieldset>
<div class="form__input">
{{#if content.label}}
<div class="form__label-wrapper">
<label for="{{settings.id}}" class="form__input-label{{#if settings.labelClasses}} {{labelClasses}}{{/if}}">
{{content.label}}
{{#if settings.required}} <abbr title="Required">*</abbr>{{/if}}
</label>
</div>
{{/if}}
<div class="form__input-wrapper">
<input id="{{settings.id}}" name="{{settings.id}}" type="{{settings.type}}"
{{#if content.placeholder}} placeholder="{{content.placeholder}}{{#if settings.required}}*{{/if}}"{{/if}}
{{#each settings.attributes}} {{attrKey}}="{{{attrValue}}}"{{/each}}
{{#if settings.required}} required="required"{{/if}}
{{#if settings.pattern}} pattern="{{{settings.pattern}}}"{{/if}}
class="form__input-text{{#if settings.inputClasses}} {{settings.inputClasses}}{{/if}}"/>
</div>
{{#if content.errorMessage}}
<div class="form__error" hidden="">
<p>{{content.errorMessage}}</p>
</div>
{{/if}}
</div>
<div class="form__radio">
{{#if content.label}}
<div class="form__label-wrapper">
<strong class="form__radio-legend">{{content.label}}{{#if settings.required}} <abbr
title="Required">*</abbr>{{/if}}</strong>
</div>
{{/if}}
<div class="form__radio-wrapper">
{{#if content.headline}}
<h2 class="form__radio-headline">{{content.headline}}</h2>
{{/if}}
<ul class="form__radio-list{{#if settings.wrapperClass}} {{settings.wrapperClass}}{{/if}}">
{{#each content.radios}}
{{> c-form__radio-item required=../settings.required}}
{{/each}}
</ul>
</div>
</div>
<div class="form__select">
<div class="form__label-wrapper">
<label for="{{id}}" class="form__select-label">
{{content.label}}{{#if settings.required}} <abbr title="Required">*</abbr>{{/if}}
</label>
</div>
<div class="form__select-wrapper">
<select id="{{settings.id}}"{{#if settings.jsModule}} data-js-module="dropdown"{{/if}}
class="form__select-field{{#if settings.class}} {{settings.class}}{{/if}}" name="{{id}}"
{{#each settings.attributes}} {{attrKey}}="{{{attrValue}}}"{{/each}}
{{#if settings.required}} required="required"{{/if}}
>
{{#each content.options}}
<option value="{{settings.val}}"{{#if settings.disabled}} disabled{{/if}}
{{#if settings.selected}} selected{{/if}}>{{content.name}}</option>
{{/each}}
</select>
</div>
</div>
<button type="submit" class="form__submit{{#if settings.submitClass}} {{settings.submitClass}}{{/if}}"{{#if settings.disabled}} disabled{{/if}}>
<span class="form__submit-text">{{content.formSubmit}}</span>
</button>
<div class="form__textarea">
<div class="form__label-wrapper">
<label for="{{settings.id}}" class="form__textarea-label">
{{content.label}} {{#is settings.required "required"}}<abbr title="Required">*</abbr>{{/is}}
</label>
</div>
<div class="form__textarea-wrapper">
<textarea class="form__textarea-input" id="{{id}}" rows="5"
{{#if content.placeholder}} placeholder="{{content.placeholder}}"{{/if}}
{{#if settings.minlength}} data-minlength="{{settings.minlength}}"{{/if}}
{{#if settings.maxlength}} data-maxlength="{{settings.maxlength}}"{{/if}}
{{#if content.dataErrormessage}} data-errormessage="{{content.dataErrormessage}}"{{/if}}
{{#if settings.required}} required="required"{{/if}}></textarea>
</div>
</div>
<div class="form__datepicker" data-js-module="form-datepicker">
{{#if content.label}}
<div class="form__label-wrapper">
<label for="{{settings.id}}"
class="form__input-label{{#if settings.labelClasses}} {{settings.labelClasses}}{{/if}}">
{{content.label}}{{#if settings.required}} <abbr title="Required">*</abbr>{{/if}}
</label>
</div>
{{/if}}
<div class="form__input-wrapper">
<input id="{{settings.id}}" name="{{settings.id}}" type="{{settings.type}}"
{{#if content.placeholder}} placeholder="{{content.placeholder}}{{/if}}
{{#if settings.required}}*{{/if}}"
{{#each settings.attributes}} {{attrKey}}="{{{attrValue}}}"{{/each}}
{{#if settings.required}} required="required"{{/if}}
{{#if settings.pattern}} pattern="{{{settings.pattern}}}"{{/if}}
class="form__input-text{{#if settings.inputClasses}} {{settings.inputClasses}}{{/if}}"/>
</div>
{{#if content.errorMessage}}
<div class="form__error" hidden="">
<p>{{content.errorMessage}}</p>
</div>
{{/if}}
</div>
/* ===================================================
Component: Form
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-form"] {
/*
Fieldset & Legend
----------------------- */
.form__fieldset {
}
.form__legend {
margin-bottom: 30px;
font-weight: bold;
}
/*
Cols & Rows
----------------------- */
.form__row {
margin-bottom: 30px;
&.is-small-margin {
margin-bottom: 20px;
}
}
.form__col {
margin-bottom: 2rem;
&.is-text-center {
text-align: center;
}
}
/*
Labels & Types
----------------------- */
.form__label-wrapper {
margin-bottom: 1rem;
}
// Labels
.form__input-label {
}
.form__input-wrapper {
}
.form__input-text {
border-radius: 4px;
padding: 8px;
border: 1px solid #d2d2d2;
width: 100%;
}
.form__input,
.form__datepicker {
input {
padding: 13px;
font-size: 14px;
}
}
// Radio
.form__radio {
}
.form__radio-wrapper {
}
.form__radio-legend {
}
.form__radio-list {
display: block;
}
.form__radio-item {
display: inline-block;
margin-right: 30px;
}
.form__radio-input {
@extend %visuallyhidden;
&:checked {
& ~ .form__radio-label {
&::before {
box-shadow: inset 0 0 0 10px #0aaaf1;
border-color: #0aaaf1;
}
}
}
}
.form__radio-label {
position: relative;
padding-left: 45px;
line-height: 32px;
display: inline-block;
&:hover {
cursor: pointer;
}
&::before {
content: '';
width: 32px;
height: 32px;
display: inline-block;
position: absolute;
top: 0;
left: 0;
background: #fff;
border-radius: 50%;
border: 1px solid #2b2b2b;
}
}
// Select
.form__select {
}
.form__select-wrapper {
}
.form__select-label {
}
.form__select-field {
}
// Textarea
.form__textarea {
width: 100%;
}
.form__textarea-wrapper {
}
.form__textarea-label {
}
.form__textarea-input {
width: 100%;
}
// Checkbox
.form__checkbox {
}
.form__checkbox-wrapper {
}
.form__checkbox-legend {
}
.form__checkbox-item {
}
.form__checkbox-input {
@extend %visuallyhidden;
&:checked {
& ~ .form__checkbox-label {
&::before {
content: '✔';
background-color: #0aaaf1;
border-color: #00AAAA;
}
}
}
}
.form__checkbox-description {
margin-top: 20px;
}
.form__checkbox-label {
position: relative;
padding-left: 45px;
line-height: 32px;
display: inline-block;
&:hover {
cursor: pointer;
}
&::before {
content: '';
width: 32px;
height: 32px;
display: inline-block;
position: absolute;
top: 0;
left: 0;
margin-right: 13px;
background: #fff;
border-radius: 4px;
border: 1px solid #ccc;
line-height: 32px;
text-align: center;
color: #fff;
}
}
// Submit
.form__submit {
@include reset-btn;
background-color: #0aaaf1;
padding: 1rem 2rem;
font-size: 1.8rem;
font-weight: 900;
color: #fff;
&:hover {
cursor: pointer;
background-color: darken(#0aaaf1, 20);
}
}
.form__submit-text {
}
/*
Error
----------------------- */
.form__error {
}
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-form--default {
}
<form class="c-form--default
is-form" action="//ajax/test.html" method="GET" data-css="c-form" data-js-module="form-ajax" data-js-options='{
"submitOnChange": false
}'>
<fieldset class="form__fieldset is-small">
<legend class="form__legend is-col-mobile-p-12">
Checkboxes
</legend>
<div class="form__row is-grid-row">
<div class="form__col is-grid-col is-col-tablet-p-4">
<div class="form__checkbox">
<div class="form__label-wrapper">
<strong class="form__checkbox-legend"></strong>
</div>
<div class="form__checkbox-wrapper">
<div class="form__checkbox-item is-wrapper">
<input id="check-01" name="check-01" type="checkbox" class="form__checkbox-input" />
<label for="check-01" class="form__checkbox-label is-label">It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
</label>
</div>
</div>
</div>
</div>
<div class="form__col is-grid-col is-col-tablet-p-4">
<div class="form__checkbox">
<div class="form__label-wrapper">
<strong class="form__checkbox-legend"></strong>
</div>
<div class="form__checkbox-wrapper">
<div class="form__checkbox-item is-wrapper">
<input id="check-02" name="check-02" type="checkbox" class="form__checkbox-input" />
<label for="check-02" class="form__checkbox-label is-label">Separated they live in Bookmarksgrove right at the coast of the Semantics...
</label>
</div>
</div>
</div>
</div>
<div class="form__col is-grid-col is-col-tablet-p-4">
<div class="form__checkbox">
<div class="form__label-wrapper">
<strong class="form__checkbox-legend"></strong>
</div>
<div class="form__checkbox-wrapper">
<div class="form__checkbox-item is-wrapper">
<input id="check-03" name="check-03" type="checkbox" class="form__checkbox-input" />
<label for="check-03" class="form__checkbox-label is-label">Far far away, behind the word mountains...
</label>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="form__fieldset is-small">
<legend class="form__legend is-col-mobile-p-12">
Date & Datepicker
</legend>
<div class="form__row is-grid-row">
<div class="form__col is-grid-col is-col-tablet-p-4">
<div class="form__input">
<div class="form__label-wrapper">
<label for="date" class="form__input-label">
Label for date
</label>
</div>
<div class="form__input-wrapper">
<input id="date" name="date" type="date" class="form__input-text is-date" />
</div>
</div>
</div>
<div class="form__col is-grid-col is-col-tablet-p-4">
<div class="form__datepicker" data-js-module="form-datepicker">
<div class="form__label-wrapper">
<label for="datepicker" class="form__input-label">
Label for datepicker
</label>
</div>
<div class="form__input-wrapper">
<input id="datepicker" name="datepicker" type="text" placeholder="01.01.2017
" class="form__input-text is-datepicker" />
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="form__fieldset is-small">
<legend class="form__legend is-col-mobile-p-12">
Differen Input Types
</legend>
<div class="form__row is-grid-row">
<div class="form__col is-grid-col is-col-tablet-p-4">
<div class="form__input">
<div class="form__label-wrapper">
<label for="button" class="form__input-label">
Label for button input
</label>
</div>
<div class="form__input-wrapper">
<input id="button" name="button" type="button" value="Submit" class="form__input-text is-btn" />
</div>
</div>
</div>
<div class="form__col is-grid-col is-col-tablet-p-4">
<div class="form__input">
<div class="form__label-wrapper">
<label for="email" class="form__input-label">
Label for email input
</label>
</div>
<div class="form__input-wrapper">
<input id="email" name="email" type="email" placeholder="max@mustermann.de" class="form__input-text" />
</div>
</div>
</div>
<div class="form__col is-grid-col is-col-tablet-p-4">
<div class="form__input">
<div class="form__label-wrapper">
<label for="file" class="form__input-label">
Label for file input
</label>
</div>
<div class="form__input-wrapper">
<input id="file" name="file" type="file" class="form__input-text" />
</div>
</div>
</div>
<div class="form__col is-grid-col is-col-tablet-p-4">
<div class="form__input">
<div class="form__label-wrapper">
<label for="number" class="form__input-label">
Label for number input
</label>
</div>
<div class="form__input-wrapper">
<input id="number" name="number" type="number" class="form__input-text" />
</div>
</div>
</div>
<div class="form__col is-grid-col is-col-tablet-p-4">
<div class="form__input">
<div class="form__label-wrapper">
<label for="password" class="form__input-label">
Label for password input
</label>
</div>
<div class="form__input-wrapper">
<input id="password" name="password" type="password" placeholder="Password" class="form__input-text" />
</div>
</div>
</div>
<div class="form__col is-grid-col is-col-tablet-p-4">
<div class="form__input">
<div class="form__label-wrapper">
<label for="range" class="form__input-label">
Label for range input
</label>
</div>
<div class="form__input-wrapper">
<input id="range" name="range" type="range" class="form__input-text" />
</div>
</div>
</div>
<div class="form__col is-grid-col is-col-tablet-p-4">
<div class="form__input">
<div class="form__label-wrapper">
<label for="tel" class="form__input-label">
Label for tel input
</label>
</div>
<div class="form__input-wrapper">
<input id="tel" name="tel" type="tel" placeholder="12312312" class="form__input-text" />
</div>
</div>
</div>
<div class="form__col is-grid-col is-col-tablet-p-4">
<div class="form__input">
<div class="form__label-wrapper">
<label for="text" class="form__input-label">
Label for text input
</label>
</div>
<div class="form__input-wrapper">
<input id="text" name="text" type="text" placeholder="Simple Placeholder" class="form__input-text" />
</div>
</div>
</div>
<div class="form__col is-grid-col is-col-tablet-p-4">
<div class="form__input">
<div class="form__label-wrapper">
<label for="time" class="form__input-label">
Label for time input
</label>
</div>
<div class="form__input-wrapper">
<input id="time" name="time" type="time" class="form__input-text" />
</div>
</div>
</div>
<div class="form__col is-grid-col is-col-tablet-p-4">
<div class="form__input">
<div class="form__label-wrapper">
<label for="url" class="form__input-label">
Label for url input
</label>
</div>
<div class="form__input-wrapper">
<input id="url" name="url" type="url" placeholder="http://www.veams.org/" class="form__input-text" />
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="form__fieldset is-small">
<legend class="form__legend is-col-mobile-p-12">
Radio Buttons
</legend>
<div class="form__row is-grid-row">
<div class="form__col is-grid-col is-col-tablet-p-4">
<div class="form__radio">
<div class="form__label-wrapper">
<strong class="form__radio-legend">Label for radio buttons</strong>
</div>
<div class="form__radio-wrapper">
<ul class="form__radio-list">
<li class="form__radio-item">
<input id="radio-01" name="radio" type="radio" value="radio-01" class="form__radio-input" />
<label for="radio-01" class="form__radio-label">
Radio 01
</label>
</li>
<li class="form__radio-item">
<input id="radio-02" name="radio" type="radio" value="radio-02" class="form__radio-input" />
<label for="radio-02" class="form__radio-label">
Radio 02
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="form__fieldset">
<legend class="form__legend is-col-mobile-p-12">
Textarea
</legend>
<div class="form__row is-grid-row">
<div class="form__col is-grid-col is-col-tablet-p-4">
<div class="form__textarea">
<div class="form__label-wrapper">
<label for="textarea" class="form__textarea-label">
Label for textarea
</label>
</div>
<div class="form__textarea-wrapper">
<textarea class="form__textarea-input" id="" rows="5" placeholder="Far far away, behind the word mountains, far from the countries Vokalia and Consonantia..."></textarea>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="form__fieldset">
<legend class="form__legend is-col-mobile-p-12">
Submit
</legend>
<div class="form__row is-grid-row">
<div class="form__col is-grid-col is-col-tablet-p-4">
<button type="submit" class="form__submit" disabled>
<span class="form__submit-text">Send</span>
</button>
</div>
</div>
</fieldset>
</form>