Radiobuttons | Punkt | Origo

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 hasFieldset som wrapper gruppen med fieldset og legend.

Varianter

<fieldset class="pkt-inputwrapper pkt-inputwrapper__fieldset">
  <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
  client:only="react"
>
  <PktRadioButton
    id="radio1"
    label="Radio1"
    name="radiogroup"
    client:only="react"
  />
  <PktRadioButton
    id="radio2"
    label="Radio2"
    name="radiogroup"
    client:only="react"
  />
</PktInputWrapper>

<PktInputWrapper
  label="Etikett"
  helptext="Dette er tekst over avmerkingsboksene."
  optionalTag
  optionalText="Valgfritt"
  forId="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

Block:

.pkt-input-check

Elements:

.pkt-input-check__input
.pkt-input-check__input-checkbox
.pkt-input-check__input-label
.pkt-input-check__input-helptext

Modifiers:

.pkt-input-check__input--tile
.pkt-input-check__input-checkbox--error

Props, slots og events

Prop	Type	Validation	Default	Beskrivelse
id	String	Påkrevd	-	En unik identifikator for komponenten.
name	String	Påkrevd	-	Egenskap for å gruppere flere RadioButtons sammen slik at brukeren kan velge ett alternativ blant dem
label	String	Påkrevd	-	Tekstetiketten for RadioButton.
defaultChecked	Boolean	Ikke påkrevd	false	Standardverdi for RadioButton.
hasTile	Boolean	Ikke påkrevd	false	Angi om komponenten har en Tile.
disabled	Boolean	Ikke påkrevd	false	Angi om RadioButton er disabled.
checkHelptext	String	Ikke påkrevd	-	Valgfri hjelpetekst for å beskrive RadioButton mer detaljert.
hasError	Boolean	Ikke påkrevd	false	Angi om det er en feil i RadioButton.
className(React)	string	-	-	Tilpasset CSS-klasse for RadioButton

Events	Type	Validation	Default	Beskrivelse
change	Vue	-	-	Utløses når tilstanden til RadioButton endres.
onChange	Vue	-	-	En annen hendelse som utløses når tilstanden til RadioButton endres.