<div class="m-form-control m-form-control--large">
<div class="row u-m-b-4">
<div class="grid">
<input type="text" id="" required placeholder="Förnamn" autocomplete="off" class="a-input has-icon">
<figure class="input-icon">
<svg class="icon">
<use xlink:href="#icon-search"></use>
</svg>
</figure>
</div>
<div class="grid-auto">
<button type="button" class="a-button">
<span class="a-button__text">Sök</span>
</button>
</div>
</div>
<div class="row u-m-b-4">
<div class="grid">
<div class="field-group">
<label for="select" class="is-required">Select</label>
<select id="select-id" required class="a-select">
<option value="" disabled selected>Välj</option>
<option value="value-1">Option 1</option>
<option value="value-2">Option 2</option>
<option value="value-3">Option 3</option>
<option value="value-4">Option 4</option>
</select>
</div>
</div>
</div>
<div class="row u-m-b-4">
<div class="grid">
<fieldset class="field-group">
<legend class="label-legend">Checkbox</legend>
<div class="checkbox">
<input type="checkbox" id="checkbox-large" name="checkbox-large" value="1" class="a-checkbox u-visuallyhidden">
<label for="checkbox-large">Namn</label>
</div>
</fieldset>
</div>
</div>
<div class="row u-m-b-4">
<div class="grid">
<fieldset class="field-group">
<legend class="label-legend">Radio buttons</legend>
<div class="radio">
<input type="radio" id="radiobutton-large" name="radiobutton-large" value="" class="a-radio u-visuallyhidden">
<label for="radiobutton-large">Namn</label>
</div>
</fieldset>
</div>
</div>
<div class="row u-m-b-4">
<div class="grid">
<div class="field-group">
<label for="message" class="is-required">Meddelande</label>
<textarea class="a-textarea" id="textarea-id" required placeholder="Förnamn" autocomplete="off"></textarea>
</div>
</div>
</div>
</div>
<div class="m-form-control{{#if modifier_class}} {{modifier_class}}{{/if}}">
<div class="row u-m-b-4">
<div class="grid">
<input type="{{type}}" id="{{id}}" {{#if value}}value="{{value}}"{{/if}} {{#if required}}required{{/if}} {{#if disabled}}disabled{{/if}} placeholder="{{placeholder}}" autocomplete="{{autocomplete}}" class="a-input{{#if has_icon}} has-icon"{{/if}}>
{{#if has_icon}}
<figure class="input-icon">
{{> @icon id="search"}}
</figure>
{{/if}}
</div>
<div class="grid-auto">
<{{getelement el "button"}} {{#if button_type}}type="{{button_type}}"{{/if}} class="a-button{{#if modifiers}} {{getmodifiers modifiers "a-button"}}{{/if}}{{#if icon }} a-button--icon{{/if}}{{#if additional_classes}} {{ additional_classes}}{{/if}}" {{{attr attributes}}}>
<span class="a-button__text">{{ button_text }}</span>
{{#if icon}}
{{> @icon id=icon additional_classes="a-button__icon"}}
{{/if}}
</{{getelement el "button"}}>
</div>
</div>
<div class="row u-m-b-4">
<div class="grid">
<div class="field-group">
{{> @label for="select" label="Select"}}
<select id="{{select_id}}" {{#if required}}required{{/if}} {{#if disabled}}disabled{{/if}} class="a-select{{#if modifier}} {{modifier}}{{/if}}">
{{#each options}}
<option value="{{value}}"{{#if is_disabled}} disabled{{/if}}{{#if is_selected}} selected{{/if}}>{{text}}</option>
{{/each}}
</select>
</div>
</div>
</div>
<div class="row u-m-b-4">
<div class="grid">
<fieldset class="field-group">
<legend class="label-legend">Checkbox</legend>
<div class="checkbox{{#if is_inline}} checkbox--inline row no-gutters{{/if}}">
{{#if is_inline}}
<div class="grid-auto">
{{/if}}
<input type="checkbox" id="{{checkbox_id}}" name="{{checkbox_name}}" value="{{checkbox_value}}" class="a-checkbox u-visuallyhidden" {{#if is_disabled}}disabled{{/if}}>
<label for="{{checkbox_id}}">{{label}}</label>
{{#if is_inline}}
</div>
{{/if}}
</div>
</fieldset>
</div>
</div>
<div class="row u-m-b-4">
<div class="grid">
<fieldset class="field-group">
<legend class="label-legend">Radio buttons</legend>
<div class="radio{{#if is_inline}} radio--inline row no-gutters{{/if}}">
{{#if is_inline}}
<div class="grid-auto">
{{/if}}
<input type="radio" id="{{radiobutton_id}}" name="{{radiobutton_name}}" value="{{radiobutton_value}}" class="a-radio u-visuallyhidden" {{#if is_disabled}}disabled{{/if}}>
<label for="{{radiobutton_id}}">{{label}}</label>
{{#if is_inline}}
</div>
{{/if}}
</div>
</fieldset>
</div>
</div>
<div class="row u-m-b-4">
<div class="grid">
<div class="field-group">
{{> @label for="message" label="Meddelande" }}
<textarea class="a-textarea" id="{{textarea_id}}" {{#if required}}required{{/if}} {{#if disabled}}disabled{{/if}} placeholder="{{placeholder}}" autocomplete="{{autocomplete}}"></textarea>
</div>
</div>
</div>
</div>
{
"label": "Namn",
"labelClasses": "is-required",
"type": "text",
"select_id": "select-id",
"textarea_id": "textarea-id",
"value": false,
"placeholder": "Förnamn",
"autocomplete": "off",
"has_icon": true,
"required": true,
"disabled": false,
"button_type": "button",
"button_text": "Sök",
"checkbox_value": "1",
"checkbox_id": "checkbox-large",
"checkbox_name": "checkbox-large",
"radiobutton_id": "radiobutton-large",
"radiobutton_name": "radiobutton-large",
"options": [
{
"value": "",
"text": "Välj",
"is_disabled": true,
"is_selected": true
},
{
"value": "value-1",
"text": "Option 1",
"is_disabled": false,
"is_selected": false
},
{
"value": "value-2",
"text": "Option 2",
"is_disabled": false,
"is_selected": false
},
{
"value": "value-3",
"text": "Option 3",
"is_disabled": false,
"is_selected": false
},
{
"value": "value-4",
"text": "Option 4",
"is_disabled": false,
"is_selected": false
}
],
"modifier_class": "m-form-control--large"
}
@charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;
@include mixin.molecule(form-control) {
// Modifier for large form fields
@include bem.m(large) {
// Inputs
@include mixin.atom(input) {
padding-top: func.rhythm(1.85);
padding-bottom: func.rhythm(1.85);
padding-left: func.rhythm(2);
font-size: func.to_rem(20px);
&.has-icon {
padding-right: func.rhythm(6);
}
}
// Input icon
@include bem.b(input-icon) {
> svg {
transform: translateY(-#{func.rhythm(4.6)}) translateX(-#{func.rhythm(2)});
}
}
// Buttons
@include mixin.atom(button) {
padding: func.rhythm(1.6) func.rhythm(4);
@include bem.b(a-button__text) {
font-size: func.to_rem(24px);
}
}
// Checkbox
@include mixin.atom(checkbox) {
+ label {
font-size: func.to_rem(20px);
&::before {
width: var.$icon-size;
height: var.$icon-size;
margin-top: func.to_rem(3px);
}
}
&:checked {
+ label {
&::after {
top: func.to_rem(10px);
left: func.to_rem(8px);
width: func.to_rem(8px);
height: func.to_rem(15px);
border-width: 0 4px 4px 0;
}
}
}
}
// Radiobutton
@include mixin.atom(radio) {
&[type='radio'] {
+ label {
font-size: func.to_rem(20px);
&::before {
width: var.$icon-size;
height: var.$icon-size;
border-width: 3px;
}
}
}
}
// Select
@include mixin.atom(select) {
padding-top: func.rhythm(1.85);
padding-bottom: func.rhythm(1.85);
padding-left: func.rhythm(2);
background-position: calc(100% - #{func.rhythm(2)}) 50%;
background-size: var.$icon-size var.$icon-size;
font-size: func.to_rem(20px);
}
// Textarea
@include mixin.atom(textarea) {
height: func.rhythm(15);
font-size: func.to_rem(20px);
}
}
// Modifier for small form fields
@include bem.m(small) {
// Inputs
@include bem.b(a-input) {
padding-top: func.rhythm(0.5);
padding-bottom: func.rhythm(0.8);
font-size: func.to_rem(16px);
}
// Input icon
@include bem.b(input-icon) {
> svg {
width: var.$icon-size-medium;
height: var.$icon-size-medium;
transform: translateY(-#{func.rhythm(3.1)}) translateX(-#{func.rhythm(1)});
}
}
// Buttons
@include mixin.atom(button) {
padding: func.rhythm(0.6) func.rhythm(1.5);
}
// Select
@include mixin.atom(select) {
padding-top: func.rhythm(0.5);
padding-bottom: func.rhythm(0.8);
background-size: var.$icon-size-small var.$icon-size-small;
font-size: func.to_rem(16px);
}
// Textarea
@include mixin.atom(textarea) {
height: func.rhythm(12);
font-size: func.to_rem(16px);
}
}
}
Form control is used to manage form element sizes. There are two (2) modifier classes available to make form fields smaller or larger:
.m-form-control--large.m-form-control--smallWhen applied, all form fields within will adapt their sizes accordingly