<div class="field-group is-invalid">
    <label for="Namn" class="{{labelClasses}}">Namn</label>
    <input type="text" id="name" aria-invalid="true" required placeholder="Förnamn" autocomplete="off" class="a-input " aria-describedby="first-name-help">
    <div class="input-help" id="first-name-help">
        Tillåtna tecken är [a-ö, A-Ö]
    </div>
</div>
<div class="field-group{{#if is_invalid}} is-invalid{{/if}}">
	{{> @label labelClasses="{{labelClasses}}" label=label for=label }}
	<input type="{{type}}" id="{{id}}" {{#if is_invalid}}aria-invalid="true"{{/if}} {{#if value}}value="{{value}}"{{/if}} {{#if required}}required{{/if}} {{#if is_disabled}}disabled{{/if}} placeholder="{{placeholder}}" autocomplete="{{autocomplete}}" class="a-input{{#if has_icon}} has-icon{{/if}} {{#if modifier}} {{modifier}}{{/if}}" {{#if has_help}} aria-describedby="first-name-help"{{/if}} {{#if required}} aria-describedby="first-name-help"{{/if}}>
	{{#if has_icon}}
	<figure class="input-icon">
		{{> @icon id="search"}}
	</figure>
	{{/if}}
	{{#if has_help}}
	<div class="input-help" id="first-name-help">
		Fyll i ditt tilltalsnamn
	</div>
	{{else if required}}
	<div class="input-help" id="first-name-help">
		Tillåtna tecken är [a-ö, A-Ö]
	</div>
	{{/if}}
</div>
{
  "label": "Namn",
  "type": "text",
  "id": "name",
  "value": false,
  "placeholder": "Förnamn",
  "autocomplete": "off",
  "has_icon": false,
  "required": true,
  "disabled": false,
  "is_invalid": true
}
  • Content:
    @charset 'UTF-8';
    
    @include atom(input) {
    	@extend %input;
    
    	&:focus {
    		@extend %input-focus;
    	}
    
    	&.has-icon {
    		padding-right: rhythm(5);
    	}
    
    	&[disabled] {
    		@extend %disabled;
    	}
    
    	@include m(discreet) {
    		@extend %discreet;
    	}
    }
    
    @include b(input-icon) {
    	display: flex;
    	justify-content: flex-end;
    	width: 100%;
    	height: 0;
    
    	> svg {
    		position: relative;
    		z-index: z_index(middleground);
    		width: $icon-size;
    		height: $icon-size;
    		transform: translateY(-#{rhythm(3.7)}) translateX(-#{rhythm(1)});
    	}
    }
    
  • URL: /components/raw/input/_input.scss
  • Filesystem Path: src/atoms/input/_input.scss
  • Size: 513 Bytes

Input

Supported formats are:

  • text
  • email
  • password
  • number
  • date
  • datetime
  • time