Styleguide

Radioknappar

Använd radioknappar när användaren kan välja ett av max sju alternativ.

Design och språk

  • Radioknapparna ska vara placerade under varandra.
  • Det ska alltid finnas minst två alternativ men max sju.
  • Användaren ska endast kunna välja ett alternativ.
  • Om det inte är obligatoriskt att svara så lägg in ett neutralt alternativ, till exempel "Vill inte svara" eller "Vet inte" så att användaren har möjlighet att ångra en inmatning.
  • Om det är obligatoriskt att svara så kan ett alternativ vara förvalt.
  • Placera alternativen i en logisk ordning och lägg det mest valda alternativet överst. Är det till exempel antal kan du börja med det lägsta eller med det högsta, beroende på vad som är mest vanligt, och sedan fortsätta i en logisk ordning.
  • Undvik bokstavsordning om det inte är det mest logiska.
  • Ha inte överlappande alternativ, som till exempel 10-20 och 20-30 utan välj 10-20 och 21-30.

Texten på etiketten och alternativen

  • Ska vara kort och tydlig.
  • Ska inte innehålla förkortningar och tecken som till exempel snedstreck.
  • Ska börja med stor bokstav.
  • Avsluta inte med en punkt, även om etiketten eller alternativen består av en mening.

Hjälptext

Hjälptexten ska hjälpa användaren att välja rätt alternativ.

I första hand ska etiketten och alternativen vara tydliga 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:

  • Statisk hjälptext som visas hela tiden för användaren och som används för korta hjälptexter.
  • Dynamisk hjälptext som är dold och visas först när användaren väljer att klicka på ikonen för hjälptext. Den dynamiska hjälptexten ska du använda vid långa hjälptexter.

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.

Felmeddelande

  • Är fältet obligatoriskt kan felmeddelandet vara "Välj ett alternativ." om användaren inte har valt ett alternativ.

Alternativa komponenter

Komponent och kod

Komponenten driftsattes första gången i version 1.0.0. Komponenten radioknappar finns i två storlekar, medium och small. Storleken som kan du använda om utrymmet på skärmen är begränsat.

Parametrar på jv-fieldset

Egenskap

Attribut

Beskrivning

Typ

Förvalt värde

disabled

disabled

Inaktiverad?

boolean

false

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

-

extraClass

extra-class

Lägg till extra klasser i parent elementet string t.ex. extra-class="classnamn1 classnamn2"

string

-

fieldsetid

fieldsetid

Fieldset id.

string

-

helpTextRef

help-text-ref

Referens till hjälptext.

string

-

legend

legend

Legend text.

string

-

required

required

Obligatorisk?

boolean

false

role

role

Sätter role attributet på fieldset, exempel på roller är "radiogroup" eller "group" för grupp av checkbox.

string

-

size

size

Storlek på komponenten, möjliga storlekar är 'medium' och 'small'.

string

'medium'

valid

valid

Ska felmeddelande visas?

boolean

true


Parametrar på radioknapp

Egenskap

Attribut

Beskrivning

Typ

Förvalt värde

extraClass

extraClass

Lägg till extra klasser i parent elementet string t.ex. extra-class="classnamn1 classnamn2"

string


label

label

Text på label

label

-

size

size

Storlek på komponenten, möjliga storlekar är 'medium' och 'small'.

sting

'medium'

Medium

HTML 
<jv-fieldset legend="Välj din favoritfärg">
  <jv-radio-button label="Ingen">
    <input id="radio_group1_webb1" type="radio" value="Ingen" name="radio_webb1" checked="checked">
  </jv-radio-button>
  <jv-radio-button label="Blå">
    <input id="radio_group1_webb2" type="radio" value="Blå" name="radio_webb1">
  </jv-radio-button>
  <jv-radio-button label="Gul">
    <input id="radio_group1_webb3" type="radio" value="Gul" name="radio_webb1">
  </jv-radio-button>
  <jv-radio-button label="Röd">
    <input id="radio_group1_webb4" type="radio" value="Röd" name="radio_webb1">
  </jv-radio-button>
</jv-fieldset>

Small

Storleken small innehåller buggar i ios på små skärmar. Du bör därför använda medium varianten för små skärmar.

HTML 
<jv-fieldset legend="Välj din favoritfärg" size="small">
  <jv-radio-button label="Ingen" size="small">
    <input id="radio_group_medium_webb1" type="radio" value="Ingen" name="radio_webb_small" checked="checked">
  </jv-radio-button>
  <jv-radio-button label="Blå" size="small">
    <input id="radio_group_medium_webb2" type="radio" value="Blå" name="radio_webb_small">
  </jv-radio-button>
  <jv-radio-button label="Gul" size="small">
    <input id="radio_group_medium_webb3" type="radio" value="Gul" name="radio_webb_small">
  </jv-radio-button>
  <jv-radio-button label="Röd" size="small">
    <input id="radio_group_medium_webb4" type="radio" value="Röd" name="radio_webb_small">
  </jv-radio-button>
</jv-fieldset>

Obligatorisk

HTML 
<jv-fieldset legend="Välj din favoritfärg" required="true">
  <jv-radio-button label="Ingen">
    <input id="radio_group_required_webb1" type="radio" value="Ingen" name="radio_webb_required" checked="checked" required="">
  </jv-radio-button>
  <jv-radio-button label="Blå">
    <input id="radio_group_required_webb2" type="radio" value="Blå" name="radio_webb_required">
  </jv-radio-button>
  <jv-radio-button label="Gul">
    <input id="radio_group_required_webb3" type="radio" value="Gul" name="radio_webb_required">
  </jv-radio-button>
  <jv-radio-button label="Röd">
    <input id="radio_group_required_webb4" type="radio" value="Röd" name="radio_webb_required">
  </jv-radio-button>
</jv-fieldset>

Valideringsfel

HTML 
<jv-fieldset legend="Välj din favoritfärg" required="true" error-text="Välj en favoritfärg." valid="false">
  <jv-radio-button label="Ingen">
    <input id="radio_group_error_webb1" type="radio" value="Ingen" name="radio_webb_error" required="">
  </jv-radio-button>
  <jv-radio-button label="Blå">
    <input id="radio_group_error_webb2" type="radio" value="Blå" name="radio_webb_error">
  </jv-radio-button>
  <jv-radio-button label="Gul">
    <input id="radio_group_error_webb3" type="radio" value="Gul" name="radio_webb_error">
  </jv-radio-button>
  <jv-radio-button label="Röd">
    <input id="radio_group_error_webb4" type="radio" value="Röd" name="radio_webb_error">
  </jv-radio-button>
</jv-fieldset>

Statisk hjälptext

Lite text med beskrivning för hur du ska besvara denna fråga och för att testa hur en lång beskrivning ser ut tillsammans med ett felmeddelande ifall man fyllt i fel eller inte alls.
HTML 
<jv-fieldset legend="Välj din favoritfärg" help-text-ref="helptext">
  <span slot="helptext" class="label__description">
    Lite text med beskrivning för hur du ska besvara denna fråga och för att testa hur en lång beskrivning
    ser ut tillsammans med ett felmeddelande ifall man fyllt i fel eller inte alls.
  </span>
  <jv-radio-button label="Ingen">
    <input id="radio_group_statisk_webb1" type="radio" value="Ingen" name="radio_statisk">
  </jv-radio-button>
  <jv-radio-button label="Blå">
    <input id="radio_group_statisk_webb2" type="radio" value="Blå" name="radio_statisk">
  </jv-radio-button>
  <jv-radio-button label="Gul">
    <input id="radio_group_statisk_webb3" type="radio" value="Gul" name="radio_statisk">
  </jv-radio-button>
  <jv-radio-button label="Röd">
    <input id="radio_group_statisk_webb4" type="radio" value="Röd" name="radio_statisk">
  </jv-radio-button>
</jv-fieldset>

Dynamisk hjälptext

Lite text med beskrivning för hur du ska besvara denna fråga och för att testa hur en lång beskrivning ser ut tillsammans med ett felmeddelande ifall man fyllt i fel eller inte alls.
HTML 
<jv-fieldset legend="Välj din favoritfärg" help-text-ref="helptext" required="true">
  <jv-help-text slot="helptext">Lite text med beskrivning för hur du ska besvara denna fråga och för
    att testa hur en
    lång beskrivning ser ut tillsammans med ett felmeddelande ifall man fyllt i fel eller inte alls.
  </jv-help-text>
  <jv-radio-button label="Ingen">
    <input id="radio_group_dynamisk_webb1" type="radio" value="Ingen" name="radio_dynamisk" required="">
  </jv-radio-button>
  <jv-radio-button label="Blå">
    <input id="radio_group_dynamisk_webb2" type="radio" value="Blå" name="radio_dynamisk">
  </jv-radio-button>
  <jv-radio-button label="Gul">
    <input id="radio_group_dynamisk_webb3" type="radio" value="Gul" name="radio_dynamisk">
  </jv-radio-button>
  <jv-radio-button label="Röd">
    <input id="radio_group_dynamisk_webb4" type="radio" value="Röd" name="radio_dynamisk">
  </jv-radio-button>
</jv-fieldset>

Inaktiverade

HTML 
<jv-fieldset legend="Välj din favoritfärg" disabled="true">
  <jv-radio-button label="Ingen">
    <input id="radio_group_disabled_webb1" type="radio" value="Ingen" name="radio_disabled" disabled="">
  </jv-radio-button>
  <jv-radio-button label="Blå">
    <input id="radio_group_disabled_webb2" type="radio" value="Blå" name="radio_disabled" disabled="">
  </jv-radio-button>
  <jv-radio-button label="Gul">
    <input id="radio_group_disabled_webb3" type="radio" value="Gul" name="radio_disabled" disabled="">
  </jv-radio-button>
  <jv-radio-button label="Röd">
    <input id="radio_group_disabled_webb4" type="radio" value="Röd" name="radio_disabled" disabled="">
  </jv-radio-button>
</jv-fieldset>

Bullet radioknapp

HTML 
<jv-fieldset legend="Välj din favoritfärg" fieldsetid="group8" type="bullet">
   <jv-radio-button label="Ingen" type="bullet">
      <input id="radio_group_bullet1" name="radio_bullet" type="radio" value="Ingen">
   </jv-radio-button>
   <jv-radio-button label="Blå" type="bullet">
      <input id="radio_group_bullet2" name="radio_bullet" type="radio" value="Blå">
   </jv-radio-button>
   <jv-radio-button label="Gul" type="bullet">
      <input id="radio_group_bullet3" name="radio_bullet" type="radio" value="Gul">
   </jv-radio-button>
   <jv-radio-button label="Röd" type="bullet">
      <input id="radio_group_bullet4" name="radio_bullet" type="radio" value="Röd">
   </jv-radio-button>
</jv-fieldset>

Horisontell

HTML 
<jv-fieldset legend="Välj din favoritfärg" fieldsetid="group9" type="bullet">
   <jv-radio-button label="Ingen" type="bullet" align="horizontal">
      <input id="radio_group_bullet_horz1" name="radio_bullet_horz" type="radio" value="Ingen">
   </jv-radio-button>
   <jv-radio-button label="Blå" type="bullet" align="horizontal">
      <input id="radio_group_bullet_horz2" name="radio_bullet_horz" type="radio" value="Blå">
   </jv-radio-button>
   <jv-radio-button label="Gul" type="bullet" align="horizontal">
      <input id="radio_group_bullet_horz3" name="radio_bullet_horz" type="radio" value="Gul">
   </jv-radio-button>
   <jv-radio-button label="Röd" type="bullet" align="horizontal">
      <input id="radio_group_bullet_horz4" name="radio_bullet_horz" type="radio" value="Röd">
   </jv-radio-button>
</jv-fieldset>

Endast HTML och CSS

Radioknappar med inmatningsfält

För att se exemplet på en radiogrupp kombinerade med textfält kan du kolla i våran exempelsida på en e-tjänst Länk till annan webbplats..

Exempel

Senast publicerad

Sidansvarig för sidan är Styleguide