<div class="field-group">
<label for="Namn" class="{{labelClasses}}">Namn</label>
<input type="text" id="name" placeholder="Förnamn" autocomplete="off" class="a-input a-input--discreet">
</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": false,
"disabled": false,
"modifier": "a-input--discreet"
}
@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 m(small) {
font-size: $size-medium;
padding: rhythm(0.5);
}
@include m(large) {
font-size: rem(32px);
padding: rhythm(1) rhythm(2);
}
}
@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)});
}
}
Supported formats are: