Använd single-select när användaren kan välja ett av åtta eller fler alternativ.
Hjälptexten ska hjälpa användaren att fylla i rätt information i fältet.
I första hand ska du använda en så pass tydlig etikett så att en hjälptext inte behövs. Behöver du använda en hjälptext kan du välja mellan två varianter. Du ska använda samma variant i hela systemet och alltså inte blanda dem. Varianterna är:
Behöver du en hjälptext ska du i första hand välja den statiska hjälptexten. Hjälptexten ska vara trevlig men inte pratig. Texten ska vara kort men tillräckligt informativ för att användaren ska bli hjälpt av den. Meningarna i hjälptexten ska börja med stor bokstav och sluta med punkt. För att kunna skriva en bra hjälptext behöver du också förstå användarens behov.
Komponenten driftsattes första gången i version 1.0.0. Komponenten single select finns i två storlekar, large och medium. Storleken medium kan du använda om utrymmet på skärmen är begränsat.
Egenskap | Attribut | Beskrivning | Typ | Förvalt värde |
---|---|---|---|---|
errorText | error-text | Feltext som visas ifall "valid" är satt till "false". | string | - |
errorTextRef | error-text-ref | Referens till en feltext som visas ifall "valid" är satt till "false". | string | - |
formatText | format-text | Text som beskriver förmatet i vilket inmatningsfältet ska fyllas i med. | string | - |
helpTextRef | help-text-ref | Referens till hjälptext. | string | - |
extraClass | extra-class | Lägg till extra klasser i parent elementet string t.ex. extra-class="classnamn1 classnamn2" | string | - |
label | label | Label text. | string | - |
size | size | Storlek på komponenten, möjliga storlekar är 'medium' och 'small'. | string | 'medium' |
valid | valid | Dafualt så används inmatningsfältet inbyggda validering. Detta kan overridas med valid attributet om man själv vill styra om inmatningsfältet är valid. | boolean | - |
<jv-dynamisk-input label="Favoritfrukt">
<select id="select_large">
<option></option>
<option>Ananas</option>
<option>Apelsin</option>
<option>Banan</option>
<option>Blodapelsin</option>
<option>Clementin</option>
<option>Dadel</option>
<option>Kiwifrukt</option>
<option>Päron</option>
<option>Äpple</option>
</select>
</jv-dynamisk-input>
<jv-dynamisk-input label="Favoritfrukt" size="small">
<select id="select_medium">
<option></option>
<option>Ananas</option>
<option>Apelsin</option>
<option>Banan</option>
<option>Blodapelsin</option>
<option>Clementin</option>
<option>Dadel</option>
<option>Kiwifrukt</option>
<option>Päron</option>
<option>Äpple</option>
</select>
</jv-dynamisk-input>
<jv-dynamisk-input label="Favoritfrukt">
<select id="select_required" required>
<option></option>
<option>Ananas</option>
<option>Apelsin</option>
<option>Banan</option>
<option>Blodapelsin</option>
<option>Clementin</option>
<option>Dadel</option>
<option>Kiwifrukt</option>
<option>Päron</option>
<option>Äpple</option>
</select>
</jv-dynamisk-input>
<jv-dynamisk-input label="Favoritfrukt" required="" error-text="Välj en frukt" valid="false">
<select id="select_error">
<option></option>
<option>Ananas</option>
<option>Apelsin</option>
<option>Banan</option>
<option>Blodapelsin</option>
<option>Clementin</option>
<option>Dadel</option>
<option>Kiwifrukt</option>
<option>Päron</option>
<option>Äpple</option>
</select>
</jv-dynamisk-input>
<jv-dynamisk-input label="Favoritfrukt" help-text-ref="helptext">
<span slot="helptext" class="label__description">Den frukt du köper oftast</span>
<select id="select_statisk">
<option></option>
<option>Ananas</option>
<option>Apelsin</option>
<option>Banan</option>
<option>Blodapelsin</option>
<option>Clementin</option>
<option>Dadel</option>
<option>Kiwifrukt</option>
<option>Päron</option>
<option>Äpple</option>
</select>
</jv-dynamisk-input>
<jv-dynamisk-input label="Favoritfrukt" help-text-ref="helptext" error-text="Välj en frukt">
<jv-help-text slot="helptext">ICA har undersökt vilka frukter som är populäras i sina cirka 1 400 butiker och kommit fram till att det är bananen som vi svenskar gillar mest. Därefter hittas äpple och apelsin. Vilken är din favorit? </jv-help-text>
<select id="dynamisk_select" required="">
<option></option>
<option>Ananas</option>
<option>Apelsin</option>
<option>Banan</option>
<option>Blodapelsin</option>
<option>Clementin</option>
<option>Dadel</option>
<option>Kiwifrukt</option>
<option>Päron</option>
<option>Äpple</option>
</select>
</jv-dynamisk-input>
<jv-dynamisk-input label="Favoritfrukt" help-text-ref="helptext" error-text="Välj en frukt">
<jv-help-text slot="helptext">Den frukt du köper oftast</jv-help-text>
<select id="select_disabled" disabled="">
<option></option>
<option>Ananas</option>
<option>Apelsin</option>
<option>Banan</option>
<option>Blodapelsin</option>
<option>Clementin</option>
<option>Dadel</option>
<option>Kiwifrukt</option>
<option>Päron</option>
<option>Äpple</option>
</select>
</jv-dynamisk-input>
Senast publicerad
Sidansvarig för sidan är Styleguide