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 | - | false | Standardverdi for Checkbox. |
| checked (Vue) | Boolean | - | false | Nåværende tilstand for Checkbox. |
| value (Vue) | Boolean | - | false | Verdien til Checkbox. |
| hasTile | Boolean | - | false | Angi om komponenten har en Tile. |
| disabled | Boolean | - | false | Angi om Checkbox er disabled. |
| label | String | PÃ¥krevd | - | Tekstetiketten for Checkbox. |
| labelPosition | Boolean | - | ‘right’ | Skal etikett plasseres til venstre (left) eller høyre (right) for checkbox |
| hideLabel | Boolean | - | false | Dersom det ønskes en frittstående checkbox. Merk at label fortsatt bør inkluderes for skjermlesere |
| checkHelptext | String | - | - | Valgfri hjelpetekst for å beskrive Checkbox mer detaljert. |
| hasError | Boolean | - | false | Angi om det er en feil i Checkbox. |
| className(React) | string | - | - | Tilpasset CSS-klasse for RadioButton |
| isSwitch | Boolean | - | false | Sett denne til true dersom Checkbox skal presenteres som en Switch |
| 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. |