Multi-select

Webbkomponent

Här kan du läsa mer information om multi-select.

Medium

Visa kod

<jv-multi-select label="Vilka länder har du besökt det senaste året?" options-display-attribute="beskrivning" inputid="multiselect1" options="[{&quot;beskrivning&quot;:&quot;Norge&quot;, &quot;kod&quot;: &quot;NORGE&quot;, &quot;selected&quot;: true},
              {&quot;beskrivning&quot;:&quot;Danmark&quot;, &quot;kod&quot;: &quot;DANMARK&quot;, &quot;test&quot;: &quot;test1&quot;},
              {&quot;beskrivning&quot;:&quot;Finland&quot;, &quot;kod&quot;: &quot;FINLAND&quot;},
              {&quot;beskrivning&quot;:&quot;Tyskland&quot;, &quot;kod&quot;: &quot;TYSKLAND&quot;},
              {&quot;beskrivning&quot;:&quot;Frankrike&quot;, &quot;kod&quot;: &quot;FRANKRIKE&quot;},
              {&quot;beskrivning&quot;:&quot;Ryssland&quot;, &quot;kod&quot;: &quot;RYSSLAND&quot;},
              {&quot;beskrivning&quot;:&quot;Polen&quot;, &quot;kod&quot;: &quot;POLAND&quot;},
              {&quot;beskrivning&quot;:&quot;Italien&quot;, &quot;kod&quot;: &quot;ITALIEN&quot;},
              {&quot;beskrivning&quot;:&quot;Storbritannien&quot;, &quot;kod&quot;: &quot;STORBRITANIEN&quot;},
              {&quot;beskrivning&quot;:&quot;Spanien&quot;, &quot;kod&quot;: &quot;SPANIEN&quot;},
              {&quot;beskrivning&quot;:&quot;Ukraina&quot;, &quot;kod&quot;: &quot;UKRAINA&quot;},
              {&quot;beskrivning&quot;:&quot;Nederländerna&quot;, &quot;kod&quot;: &quot;NEDERLANDERNA&quot;},
              {&quot;beskrivning&quot;:&quot;Belgien&quot;, &quot;kod&quot;: &quot;BELGIEN&quot;},
              {&quot;beskrivning&quot;:&quot;Grekland&quot;, &quot;kod&quot;: &quot;GREKLAND&quot;},
              {&quot;beskrivning&quot;:&quot;Irland&quot;, &quot;kod&quot;: &quot;IRLAND&quot;},
              {&quot;beskrivning&quot;:&quot;Portugal&quot;, &quot;kod&quot;: &quot;PORTUGAL&quot;},
              {&quot;beskrivning&quot;:&quot;Island&quot;, &quot;kod&quot;: &quot;ISLAND&quot;}]">
</jv-multi-select>

Small

Visa kod

<jv-multi-select label="Vilka länder har du besökt det senaste året?" options="[{&quot;value&quot;:&quot;Norge&quot;},
              {&quot;value&quot;:&quot;Danmark&quot;},
              {&quot;value&quot;:&quot;Finland&quot;},
              {&quot;value&quot;:&quot;Tyskland&quot;},
              {&quot;value&quot;:&quot;Frankrike&quot;},
              {&quot;value&quot;:&quot;Ryssland&quot;},
              {&quot;value&quot;:&quot;Polen&quot;},
              {&quot;value&quot;:&quot;Italien&quot;},
              {&quot;value&quot;:&quot;Storbritannien&quot;},
              {&quot;value&quot;:&quot;Spanien&quot;},
              {&quot;value&quot;:&quot;Ukraina&quot;},
              {&quot;value&quot;:&quot;Nederländerna&quot;},
              {&quot;value&quot;:&quot;Belgien&quot;},
              {&quot;value&quot;:&quot;Grekland&quot;},
              {&quot;value&quot;:&quot;Irland&quot;},
              {&quot;value&quot;:&quot;Portugal&quot;},
              {&quot;value&quot;:&quot;Island&quot;}]" size="small" value="[&quot;Norge&quot;]">
</jv-multi-select>

Obligatorisk

Visa kod

<jv-multi-select label="Vilka länder har du besökt det senaste året?" options="[&quot;Norge&quot;,
              &quot;Danmark&quot;, &quot;Finland&quot;, &quot;Tyskland&quot;, &quot;Frankrike&quot;, &quot;Ryssland&quot;, &quot;Polen&quot;,
              &quot;Italien&quot;, &quot;Storbritannien&quot;, &quot;Spanien&quot;, &quot;Ukraina&quot;, &quot;Nederländerna&quot;,
              &quot;Belgien&quot;, &quot;Grekland&quot;, &quot;Irland&quot;, &quot;Portugal&quot;,&quot;Island&quot;]" required="true">
</jv-multi-select>

Valideringsfel

Visa kod

<jv-multi-select error-text="Välj minst ett land i listan" label="Vilka länder har du besökt det senaste året?" options="[{&quot;value&quot;:&quot;Norge&quot;},
              {&quot;value&quot;:&quot;Danmark&quot;},
              {&quot;value&quot;:&quot;Finland&quot;},
              {&quot;value&quot;:&quot;Tyskland&quot;},
              {&quot;value&quot;:&quot;Frankrike&quot;},
              {&quot;value&quot;:&quot;Ryssland&quot;},
              {&quot;value&quot;:&quot;Polen&quot;},
              {&quot;value&quot;:&quot;Italien&quot;},
              {&quot;value&quot;:&quot;Storbritannien&quot;},
              {&quot;value&quot;:&quot;Spanien&quot;},
              {&quot;value&quot;:&quot;Ukraina&quot;},
              {&quot;value&quot;:&quot;Nederländerna&quot;},
              {&quot;value&quot;:&quot;Belgien&quot;},
              {&quot;value&quot;:&quot;Grekland&quot;},
              {&quot;value&quot;:&quot;Irland&quot;},
              {&quot;value&quot;:&quot;Portugal&quot;},
              {&quot;value&quot;:&quot;Island&quot;}]" required="true" valid="false">
</jv-multi-select>

Valideringsfel i en slot

Välj minst ett land i listan

Visa kod

<jv-multi-select error-text-ref="errortext" label="Vilka länder har du besökt det senaste året?" options="[{&quot;value&quot;:&quot;Norge&quot;},
              {&quot;value&quot;:&quot;Danmark&quot;},
              {&quot;value&quot;:&quot;Finland&quot;},
              {&quot;value&quot;:&quot;Tyskland&quot;},
              {&quot;value&quot;:&quot;Frankrike&quot;},
              {&quot;value&quot;:&quot;Ryssland&quot;},
              {&quot;value&quot;:&quot;Polen&quot;},
              {&quot;value&quot;:&quot;Italien&quot;},
              {&quot;value&quot;:&quot;Storbritannien&quot;},
              {&quot;value&quot;:&quot;Spanien&quot;},
              {&quot;value&quot;:&quot;Ukraina&quot;},
              {&quot;value&quot;:&quot;Nederländerna&quot;},
              {&quot;value&quot;:&quot;Belgien&quot;},
              {&quot;value&quot;:&quot;Grekland&quot;},
              {&quot;value&quot;:&quot;Irland&quot;},
              {&quot;value&quot;:&quot;Portugal&quot;},
              {&quot;value&quot;:&quot;Island&quot;}]" required="true" valid="false">
  <span slot="errortext">Välj minst ett land i listan</span>
</jv-multi-select>

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.

Visa kod

<jv-multi-select help-text-ref="helptext" label="Vilka länder har du besökt det senaste året?" options="[{&quot;value&quot;:&quot;Norge&quot;},
              {&quot;value&quot;:&quot;Danmark&quot;},
              {&quot;value&quot;:&quot;Finland&quot;},
              {&quot;value&quot;:&quot;Tyskland&quot;},
              {&quot;value&quot;:&quot;Frankrike&quot;},
              {&quot;value&quot;:&quot;Ryssland&quot;},
              {&quot;value&quot;:&quot;Polen&quot;},
              {&quot;value&quot;:&quot;Italien&quot;},
              {&quot;value&quot;:&quot;Storbritannien&quot;},
              {&quot;value&quot;:&quot;Spanien&quot;},
              {&quot;value&quot;:&quot;Ukraina&quot;},
              {&quot;value&quot;:&quot;Nederländerna&quot;},
              {&quot;value&quot;:&quot;Belgien&quot;},
              {&quot;value&quot;:&quot;Grekland&quot;},
              {&quot;value&quot;:&quot;Irland&quot;},
              {&quot;value&quot;:&quot;Portugal&quot;},
              {&quot;value&quot;:&quot;Island&quot;}]">
  <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-multi-select>

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.

Visa kod

<jv-multi-select help-text-ref="helptext" label="Vilka länder har du besökt det senaste året?" options="[{&quot;value&quot;:&quot;Norge&quot;},
              {&quot;value&quot;:&quot;Danmark&quot;},
              {&quot;value&quot;:&quot;Finland&quot;},
              {&quot;value&quot;:&quot;Tyskland&quot;},
              {&quot;value&quot;:&quot;Frankrike&quot;},
              {&quot;value&quot;:&quot;Ryssland&quot;},
              {&quot;value&quot;:&quot;Polen&quot;},
              {&quot;value&quot;:&quot;Italien&quot;},
              {&quot;value&quot;:&quot;Storbritannien&quot;},
              {&quot;value&quot;:&quot;Spanien&quot;},
              {&quot;value&quot;:&quot;Ukraina&quot;},
              {&quot;value&quot;:&quot;Nederländerna&quot;},
              {&quot;value&quot;:&quot;Belgien&quot;},
              {&quot;value&quot;:&quot;Grekland&quot;},
              {&quot;value&quot;:&quot;Irland&quot;},
              {&quot;value&quot;:&quot;Portugal&quot;},
              {&quot;value&quot;:&quot;Island&quot;}]">
  <jv-help-text slot="helptext"><span>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-help-text>
</jv-multi-select>

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.

Visa kod

<jv-multi-select disabled="true" help-text-ref="helptext3" label="Vilka länder har du besökt det senaste året?" options="[{&quot;value&quot;:&quot;Norge&quot;},
              {&quot;value&quot;:&quot;Danmark&quot;},
              {&quot;value&quot;:&quot;Finland&quot;},
              {&quot;value&quot;:&quot;Tyskland&quot;},
              {&quot;value&quot;:&quot;Frankrike&quot;},
              {&quot;value&quot;:&quot;Ryssland&quot;},
              {&quot;value&quot;:&quot;Polen&quot;},
              {&quot;value&quot;:&quot;Italien&quot;},
              {&quot;value&quot;:&quot;Storbritannien&quot;},
              {&quot;value&quot;:&quot;Spanien&quot;},
              {&quot;value&quot;:&quot;Ukraina&quot;},
              {&quot;value&quot;:&quot;Nederländerna&quot;},
              {&quot;value&quot;:&quot;Belgien&quot;},
              {&quot;value&quot;:&quot;Grekland&quot;},
              {&quot;value&quot;:&quot;Irland&quot;},
              {&quot;value&quot;:&quot;Portugal&quot;},
              {&quot;value&quot;:&quot;Island&quot;}]" value="[&quot;Norge&quot;]">
  <jv-help-text slot="helptext3">
    <span>
      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-help-text>
</jv-multi-select>