<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
}
@charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/extends';
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@include mixin.atom(input) {
@extend %input;
&:focus {
@extend %input-focus;
}
&.has-icon {
padding-right: func.rhythm(5);
}
&[disabled] {
@extend %disabled;
}
@include bem.m(discreet) {
@extend %discreet;
}
@include bem.m(small) {
font-size: var.$size-medium;
padding: func.rhythm(0.5);
}
@include bem.m(large) {
font-size: func.to_rem(32px);
padding: func.rhythm(1) func.rhythm(2);
}
}
@include bem.b(input-icon) {
display: flex;
justify-content: flex-end;
width: 100%;
height: 0;
> svg {
position: relative;
z-index: func.z_index(middleground);
width: var.$icon-size;
height: var.$icon-size;
transform: translateY(-#{func.rhythm(3.7)}) translateX(-#{func.rhythm(1)});
}
}
Supported formats are: