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 checkboxes brukes vÄr inputwrapper som sikrer riktig layout og styling. Ved grupper av checkboxes brukes hasFieldset som wrapper gruppen med fieldset og legend.
Varianter
<div class="pkt-input-check">
<div class="pkt-input-check__input">
<input
class="pkt-input-check__input-checkbox"
type="checkbox"
id="exampleCheckbox"
/>
<label class="pkt-input-check__input-label" for="exampleCheckbox"
>Checkbox 1
<div class="pkt-input-check__input-helptext">
Denne valgfrie teksten kan brukes til Ă„ beskrive etiketten mer
detaljert.
</div>
</label>
</div>
</div><PktCheckbox
id="checboxSingle"
label="Checkbox"
checkHelptext="Denne valgfrie teksten kan brukes til Ă„ beskrive etiketten mer detaljert."
/><PktCheckbox
id="checboxSingle"
label="Checkbox"
checkHelptext="Denne valgfrie teksten kan brukes til Ă„ beskrive etiketten mer detaljert."
/>Tile
<div class="pkt-input-check">
<div class="pkt-input-check__input">
<input
class="pkt-input-check__input-checkbox pkt-input-check__input--tile"
type="checkbox"
id="checboxTile"
/>
<label class="pkt-input-check__input-label" for="checboxTile"
>Checkbox 1
<div class="pkt-input-check__input-helptext">
Denne valgfrie teksten kan brukes til Ă„ beskrive etiketten mer
detaljert.
</div>
</label>
</div>
</div><PktCheckbox
id="checboxTile"
label="ChecboxTile"
checkHelptext="Denne valgfrie teksten kan brukes til Ă„ beskrive etiketten mer detaljert."
hasTile
/><PktCheckbox
id="checboxTile"
label="CheckboxTile"
checkHelptext="Denne valgfrie teksten kan brukes til Ă„ beskrive etiketten mer detaljert."
hasTile
/>Checkboxgroup med inputwrapper
<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 pkt-input-check__input--tile">
<input
class="pkt-input-check__input-checkbox"
type="checkbox"
id="checkbox1"
/>
<label class="pkt-input-check__input-label" for="checkbox1"
>Checkbox1
</label>
</div>
<div class="pkt-input-check__input pkt-input-check__input--tile">
<input
class="pkt-input-check__input-checkbox"
type="checkbox"
id="exampleCheckbox2tile"
/>
<label class="pkt-input-check__input-label" for="checkbox2"
>Checkbox2</label
>
</div>
</div>
</fieldset><PktInputWrapper
label="Etikett"
helptext="Dette er tekst over avmerkingsboksene."
optionalTag
optionalText="Valgfritt"
forId="checkboxGroup"
hasFieldset
>
<PktCheckbox id="checkbox1" label="Checkbox1" />
<PktCheckbox id="checkbox2" label="Checkbox2" />
</PktInputWrapper><PktInputWrapper
label="Etikett"
helptext="Dette er tekst over avmerkingsboksene."
optionalTag
optionalText="Valgfritt"
forId="checkboxGroup"
hasFieldset
>
<PktCheckbox id="checkbox1" label="Checkbox1" />
<PktCheckbox id="checkbox2" label="Checkbox2" />
</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="checkbox"
id="exampleCheckboxError"
/>
<label class="pkt-input-check__input-label" for="exampleCheckboxError">
Checkbox Error
</label>
</div>
</div><PktCheckbox id="checboxError" label="CheckboxError" hasError /><PktCheckbox id="checboxError" label="CheckboxError" hasError />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. |
| defaultChecked | Boolean | Ikke pÄkrevd | false | Standardverdi for Checkbox. |
| checked (Vue) | Boolean | Ikke pÄkrevd | false | NÄvÊrende tilstand for Checkbox. |
| value (Vue) | Boolean | Ikke pÄkrevd | false | Verdien til Checkbox. |
| hasTile | Boolean | Ikke pÄkrevd | false | Angi om komponenten har en Tile. |
| disabled | Boolean | Ikke pÄkrevd | false | Angi om Checkbox er disabled. |
| label | String | Ikke pÄkrevd | - | Tekstetiketten for Checkbox. |
| checkHelptext | String | Ikke pÄkrevd | - | Valgfri hjelpetekst for Ä beskrive Checkbox mer detaljert. |
| hasError | Boolean | Ikke pÄkrevd | false | Angi om det er en feil i Checkbox. |
| className(React) | string | - | - | Tilpasset CSS-klasse for RadioButton |
| Events | Type | Validation | Default | Beskrivelse |
|---|---|---|---|---|
| change (Vue) | - | - | - | UtlÞses nÄr tilstanden til Checkbox endres. |
| onChange (Vue) | - | - | - | En annen hendelse som utlÞses nÄr tilstanden til Checkbox endres. |