Radioknappar

Webbkomponent

Här kan du läsa mer information om radioknapp som webbkomponent.

Medium

Här kan du läsa mer information om form group som webbkomponent.

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

Small

<jv-fieldset legend="Välj din favoritfärg" size="small" fieldsetid="group2">
  <jv-radio-button label="Ingen" size="small">
    <input checked="checked" id="radio_group_small_webb1" name="radio_webb_small" type="radio" value="Ingen">
  </jv-radio-button>
  <jv-radio-button label="Blå" size="small">
    <input id="radio_group_small_webb2" name="radio_webb_small" type="radio" value="Blå">
  </jv-radio-button>
  <jv-radio-button label="Gul" size="small">
    <input id="radio_group_small_webb3" name="radio_webb_small" type="radio" value="Gul">
  </jv-radio-button>
  <jv-radio-button label="Röd" size="small">
    <input id="radio_group_small_webb4" name="radio_webb_small" type="radio" value="Röd">
  </jv-radio-button>
</jv-fieldset>

Obligatorisk

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

Valideringsfel

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

Valideringsfel

Välj en favoritfärg.

<jv-fieldset error-text-ref="errortext" legend="Välj din favoritfärg" required="true" valid="false" fieldsetid="group4">
  <span slot="errortext">Välj en favoritfärg.</span>
  <jv-radio-button label="Ingen">
    <input id="radio_group_error_webb1_slot" name="radio_webb_error_slot" required="" type="radio" value="Ingen">
  </jv-radio-button>
  <jv-radio-button label="Blå">
    <input id="radio_group_error_webb2_slot" name="radio_webb_error_slot" type="radio" value="Blå">
  </jv-radio-button>
  <jv-radio-button label="Gul">
    <input id="radio_group_error_webb3_slot" name="radio_webb_error_slot" type="radio" value="Gul">
  </jv-radio-button>
  <jv-radio-button label="Röd">
    <input id="radio_group_error_webb4_slot" name="radio_webb_error_slot" type="radio" value="Röd">
  </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.

<jv-fieldset static-help-text-ref="helptext" legend="Välj din favoritfärg" fieldsetid="group5">
  <span class="label__description" 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.
  </span>
  <jv-radio-button label="Ingen">
    <input id="radio_group_statisk_webb1" name="radio_statisk" type="radio" value="Ingen">
  </jv-radio-button>
  <jv-radio-button label="Blå">
    <input id="radio_group_statisk_webb2" name="radio_statisk" type="radio" value="Blå">
  </jv-radio-button>
  <jv-radio-button label="Gul">
    <input id="radio_group_statisk_webb3" name="radio_statisk" type="radio" value="Gul">
  </jv-radio-button>
  <jv-radio-button label="Röd">
    <input id="radio_group_statisk_webb4" name="radio_statisk" type="radio" value="Röd">
  </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.

<jv-fieldset help-text-ref="helptext" legend="Välj din favoritfärg" required="true" fieldsetid="group6">
  <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" name="radio_dynamisk" required="" type="radio" value="Ingen">
  </jv-radio-button>
  <jv-radio-button label="Blå">
    <input id="radio_group_dynamisk_webb2" name="radio_dynamisk" type="radio" value="Blå">
  </jv-radio-button>
  <jv-radio-button label="Gul">
    <input id="radio_group_dynamisk_webb3" name="radio_dynamisk" type="radio" value="Gul">
  </jv-radio-button>
  <jv-radio-button label="Röd">
    <input id="radio_group_dynamisk_webb4" name="radio_dynamisk" type="radio" value="Röd">
  </jv-radio-button>
</jv-fieldset>

Inaktiverad

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-fieldset disabled="true" help-text-ref="helptext" legend="Välj din favoritfärg" fieldsetid="group7">
  <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_disabled_webb1" name="radio_disabled" type="radio" value="Ingen">
  </jv-radio-button>
  <jv-radio-button label="Blå">
    <input id="radio_group_disabled_webb2" name="radio_disabled" type="radio" value="Blå">
  </jv-radio-button>
  <jv-radio-button label="Gul">
    <input id="radio_group_disabled_webb3" name="radio_disabled" type="radio" value="Gul">
  </jv-radio-button>
  <jv-radio-button label="Röd">
    <input id="radio_group_disabled_webb4" name="radio_disabled" type="radio" value="Röd">
  </jv-radio-button>
</jv-fieldset>

Bullet radioknapp

<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>

Bullet radioknapp horisontell

<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

Här hittar du radioknappar utan JavaScript