Radiobuttons

Om komponenten

Både checkboxer og radiobuttons bruker samme klasse, pkt-input-check.

Strukturelt skal <input> og <label> være søskenelementer istedet for å ha <label> rundt <input>. Dette krever mer markup siden du må legge til id og for attributter. Dette er gjort for at det er dette som gir mest konsistent resultat for hjelpemidler som skjermlesere og liknende.

For å lage grupper med radiobuttons brukes vår inputwrapper som sikrer riktig layout og styling. Ved grupper av radiobuttons brukes role="radiogroup", og hasFieldset som wrapper gruppen med fieldset og legend.

Hvordan ta i bruk?

Bruker dere React, så er det bare å fortsette med å importere komponenten og bruke den. Bruker dere Vue, så ønsker vi at dere går over til å bruke våre pkt-elements. Dette kan dere gjøre enten ved å bruke pkt-elements fra CDN, eller ved å installere pkt-elements lokalt og bruke det lokalt.

// React
import { PktRadioButton } from "@oslokommune/punkt-react";

// Custom Element:
import "@oslokommune/punkt-elements/dist/pkt-radiobutton.js";

// Custom Element fra CDN:
<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-radiobutton.js"></script>;

Varianter

  <pkt-input-wrapper
    forId="radioGroup1"
    label="Etikett"
    helptext="Dette er tekst over avmerkingsboksene."
    helptextDropdown="Dette er tekst over avmerkingsboksene i en dropdown"
    helptextDropdownButton="Les mer om frukt"
    optionalTag
    optionalText="Valgfritt"
    hasFieldset
    role="radiogroup"
  >
   <pkt-radiobutton
      name="frukt"
      value="Eple"
      id="eple"
      label="Eple"
      checkHelptext="Dette er tekst over avmerkingsboksene."
    >
  </pkt-radiobutton>
   <pkt-radiobutton
      name="frukt"
      value="Banan"
      id="banan"
      label="Banan"
      checkHelptext="Dette er tekst over avmerkingsboksene."
    >
  </pkt-input-wrapper>

<fieldset class="pkt-inputwrapper pkt-inputwrapper__fieldset" role="radiogroup">
  <legend class="pkt-inputwrapper__label pkt-inputwrapper__legend">
    Etikett
  </legend>
  <div class="pkt-inputwrapper__helptext">
    Dette er tekst over avmerkingsboksene.
  </div>
  <div class="pkt-input-check">
    <div class="pkt-input-check__input">
      <input
        class="pkt-input-check__input-checkbox"
        type="radio"
        id="radio1"
        name="radiogroup"
      />
      <label class="pkt-input-check__input-label" for="radio1">Radio1</label>
    </div>
    <div class="pkt-input-check__input">
      <input class="pkt-input-check__input-checkbox" type="radio" id="radio2" />
      <label class="pkt-input-check__input-label" for="radio2">Radio2</label>
    </div>
  </div>
</fieldset>

<PktInputWrapper
  label="Etikett"
  helptext="Dette er tekst over avmerkingsboksene."
  optionalTag
  optionalText="Valgfritt"
  forId="radioGroup"
  hasFieldset
  role="radiogroup"
  client:load
>
  <PktRadioButton id="radio1" label="Radio1" name="radiogroup" client:load />
  <PktRadioButton id="radio2" label="Radio2" name="radiogroup" client:load />
</PktInputWrapper>

<PktInputWrapper
  label="Etikett"
  helptext="Dette er tekst over avmerkingsboksene."
  optionalTag
  optionalText="Valgfritt"
  forId="radioGroup"
  role="radiogroup"
  hasFieldset
>
  <PktRadioButton id="radio1" label="Radio1" name="radiogroup" />
  <PktRadioButton id="radio2" label="Radio2" name="radiogroup" />
</PktInputWrapper>

Error

Legg til pkt-input-check__input-checkbox--error på inputfeltet i CSS, eller hasError som prop i React/Vue.

<div class="pkt-input-check">
  <div class="pkt-input-check__input">
    <input
      class="pkt-input-check__input-checkbox pkt-input-check__input-checkbox--error"
      type="radio"
      id="radio1error"
    />
    <label class="pkt-input-check__input-label" for="radio1error">
      Radio Error
    </label>
  </div>
</div>

<PktInputWrapper
  label="Etikett"
  helptext="Dette er tekst over avmerkingsboksene."
  optionalTag
  optionalText="Valgfritt"
  forId="radioGroup"
  hasFieldset
  hasError
  errorMessage="Dette er en feilmelding"
>
  <PktRadioButton
    id="radio1error"
    label="Radio1 med error"
    name="radiogroup2"
    hasError
  />
  <PktRadioButton
    id="radio2error"
    label="Radio2 med error"
    name="radiogroup2"
  />
</PktInputWrapper>

<PktInputWrapper
  label="Etikett"
  helptext="Dette er tekst over avmerkingsboksene."
  optionalTag
  optionalText="Valgfritt"
  forId="radioGroup"
  hasFieldset
  hasError
  errorMessage="Dette er en feilmelding"
>
  <PktRadioButton
    id="radio2error"
    label="Radio1 med error"
    name="radiogroup2"
    hasError
  />
  <PktRadioButton
    id="radio2error"
    label="Radio2 med error"
    name="radiogroup2"
  />
</PktInputWrapper>

CSS oversikt

Props, slots og events