<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"
}
  • Content:
    @charset 'UTF-8';
    
    @include molecule(form-control) {
    
    	// Modifier for large form fields
    	@include m(large) {
    		// Inputs
    		@include atom(input) {
    			padding-top: rhythm(1.85);
    			padding-bottom: rhythm(1.85);
    			padding-left: rhythm(2);
    			font-size: rem(20px);
    
    			&.has-icon {
    				padding-right: rhythm(6);
    			}
    		}
    
    		// Input icon
    		@include b(input-icon) {
    			> svg {
    				transform: translateY(-#{rhythm(4.6)}) translateX(-#{rhythm(2)});
    			}
    		}
    
    		// Buttons
    		@include atom(button) {
    			padding: rhythm(1.6) rhythm(4);
    
    			@include b(a-button__text) {
    				font-size: rem(24px);
    			}
    		}
    
    		// Checkbox
    		@include atom(checkbox) {
    			+ label {
    				font-size: rem(20px);
    
    				&::before {
    					width: $icon-size;
    					height: $icon-size;
    					margin-top: rem(3px);
    				}
    			}
    
    			&:checked {
    				+ label {
    					&::after {
    						top: rem(10px);
    						left: rem(8px);
    						width: rem(8px);
    						height: rem(15px);
    						border-width: 0 4px 4px 0;
    					}
    				}
    			}
    		}
    
    		// Radiobutton
    		@include atom(radio) {
    			&[type='radio'] {
    				+ label {
    					font-size: rem(20px);
    
    					&::before {
    						width: $icon-size;
    						height: $icon-size;
    						border-width: 3px;
    					}
    				}
    			}
    		}
    
    		// Select
    		@include atom(select) {
    			padding-top: rhythm(1.85);
    			padding-bottom: rhythm(1.85);
    			padding-left: rhythm(2);
    			background-position: calc(100% - #{rhythm(2)}) 50%;
    			background-size: $icon-size $icon-size;
    			font-size: rem(20px);
    		}
    
    		// Textarea
    		@include atom(textarea) {
    			height: rhythm(15);
    			font-size: rem(20px);
    		}
    	}
    
    	// Modifier for small form fields
    	@include m(small) {
    		// Inputs
    		@include b(a-input) {
    			padding-top: rhythm(0.5);
    			padding-bottom: rhythm(0.8);
    			font-size: rem(16px);
    		}
    
    		// Input icon
    		@include b(input-icon) {
    			> svg {
    				width: $icon-size-medium;
    				height: $icon-size-medium;
    				transform: translateY(-#{rhythm(3.1)}) translateX(-#{rhythm(1)});
    			}
    		}
    
    		// Buttons
    		@include atom(button) {
    			padding: rhythm(0.6) rhythm(1.5);
    		}
    
    		// Select
    		@include atom(select) {
    			padding-top: rhythm(0.5);
    			padding-bottom: rhythm(0.8);
    			background-size: $icon-size-small $icon-size-small;
    			font-size: rem(16px);
    		}
    
    		// Textarea
    		@include atom(textarea) {
    			height: rhythm(12);
    			font-size: rem(16px);
    		}
    	}
    }
    
  • URL: /components/raw/form-control/_form-control.scss
  • Filesystem Path: src/molecules/form-control/_form-control.scss
  • Size: 2.3 KB

Form control

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

When applied, all form fields within will adapt their sizes accordingly