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
>
<PktRadioButton id="radio1" label="Radio1" name="radiogroup" />
<PktRadioButton id="radio2" label="Radio2" name="radiogroup" />
</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.
Dette er en feilmelding
<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. |