nve-radio-group
Arvet fra LitElement
Feil / oppgaver / PR
Ingen som vi vet om. Hvis du finner noe muffens, registrer en feil under Issues i Github og merk den med nve-radio-group.
<nve-radio-group label="Hva er status på tiltaket?">
<nve-radio value="planned">Planlagt</nve-radio>
<nve-radio value="current">Pågående</nve-radio>
<nve-radio value="done">Ferdigstilt</nve-radio>
</nve-radio-group>nve-radio er ikke bygget med native input og label. Det er et bevisst valg for å kunne legge role="radio" direkte på host-elementet og styre tilgjengeligheten mer presist med aria-setsize, aria-posinset og aria-checked. Les mer i tilgjengelighet seksjonen.
nve-radio-group og nve-radio bruker ikke name-attributtet slik vanlige HTML-radiofelter gjør. Komponenten støtter ikke native form submission, så name blir ikke brukt til å sende inn en verdi i et skjema.
name er heller ikke nødvendig for å gruppere radio-knappene. Gruppelogikken styres av nve-radio-group, som sørger for at bare ett alternativ kan være valgt om gangen og emitterer valgt verdi via komponentens change-hendelse.
For denne komponenten er det derfor value på valgt nve-radio og change-hendelsen fra nve-radio-group som brukes for å lese brukerens valg.
Eksempler
Ledetekst
Bruk label for å vise en tydelig ledetekst for feltet. Attributtet er påkrevd – hvert skjemafelt skal ha en ledetekst som skjermlesere kan bruke for å forstå hva feltet gjelder.
<nve-radio-group label="Hva er status på tiltaket?">
<nve-radio value="planned">Planlagt</nve-radio>
<nve-radio value="current">Pågående</nve-radio>
<nve-radio value="done">Ferdigstilt</nve-radio>
</nve-radio-group>Skjult ledetekst
Vi anbefaler å alltid vise ledeteksten. Hvis den i enkelte tilfeller må skjules av hensyn til utformingen, kan du bruke CSS til å skjule den visuelt. Ledeteksten er fortsatt tilgjengelig i DOM-en og kan leses av skjermlesere.
Bruk ::part(label) for å skjule ledeteksten.
Det kan også være nødvendig å sette margin-top: 0 på ::part(radio-group) for å fjerne avstanden over feltet.
<nve-radio-group class="hideLabel" label="Hva er status på tiltaket?">
<nve-radio value="planned">Planlagt</nve-radio>
<nve-radio value="current">Pågående</nve-radio>
<nve-radio value="done">Ferdigstilt</nve-radio>
</nve-radio-group>
<style>
.hideLabel::part(label) {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.hideLabel::part(radio-group) {
margin-top: 0;
}
</style>Toggletip
Bruk sporet label-toggletip for å vise en toggletip ved siden av ledeteksten. Sporet er beregnet for en nve-toggletip-komponent.
Husk å legge til aria-label på nve-toggletip.
<nve-radio-group label="Hva er status på tiltaket?">
<nve-toggletip slot="label-toggletip" aria-label="Les mer om tiltaket">
<span>Ekstra info her.</span>
</nve-toggletip>
<nve-radio value="planned">Planlagt</nve-radio>
<nve-radio value="current">Pågående</nve-radio>
<nve-radio value="done">Ferdigstilt</nve-radio>
</nve-radio-group>Påkrevd og Valgfritt
Det er ikke nødvendig å merke feltene som obligatoriske dersom flertallet av feltene er påkrevd. Brukeren må imidlertid informeres om dette før vedkommende begynner å fylle ut skjemaet. Dersom enkelte felt er valgfrie, skal disse merkes tydelig som valgfrie. Tilsvarende gjelder dersom flertallet av feltene er valgfrie – da skal de obligatoriske feltene merkes særskilt.
Bruk required for å sette feltet til obligatorisk, og bruk hideRequiredTag for å skjule merket «Må fylles ut» uten å endre at feltet er obligatorisk.
Bruk optional for å vise merket «Valgfritt».
<nve-radio-group label="Hva er status på tiltaket?" required>
<nve-radio value="planned">Planlagt</nve-radio>
<nve-radio value="current">Pågående</nve-radio>
<nve-radio value="done">Ferdigstilt</nve-radio>
</nve-radio-group>
<nve-radio-group label="Hva er status på tiltaket?" optional>
<nve-radio value="planned">Planlagt</nve-radio>
<nve-radio value="current">Pågående</nve-radio>
<nve-radio value="done">Ferdigstilt</nve-radio>
</nve-radio-group>Ved annet språk, kan attributtene requiredLabel og optionalLabel tas i bruk. De erstatter teksten i henholdsvis required-merket og optional-merket, uten å legge til et nytt merke. Brukes sammen med required og optional attributtene. Standardtekstene er «Må fylles ut» og «Valgfritt» og skal ikke endres etter retningslinjene.
Retning
Bruk orientation for å velge retning:
- vertical er standard og viser radioknappene under hverandre.
- horizontal viser radioknappene ved siden av hverandre.
<nve-radio-group label="Hva er status på tiltaket? (vertical)">
<nve-radio value="planned">Planlagt</nve-radio>
<nve-radio value="current">Pågående</nve-radio>
<nve-radio value="done">Ferdigstilt</nve-radio>
</nve-radio-group>
<nve-radio-group label="Hva er status på tiltaket? (horizontal)" orientation="horizontal">
<nve-radio value="planned">Planlagt</nve-radio>
<nve-radio value="current">Pågående</nve-radio>
<nve-radio value="done">Ferdigstilt</nve-radio>
</nve-radio-group>Størrelse
Størrelsen styres på gruppenivå. Bruk size for å velge størrelse:
- small
- medium - er standard
- large
<nve-radio-group label="Hva er status på tiltaket? (small)" size="small">
<nve-radio value="planned">Planlagt</nve-radio>
<nve-radio value="current">Pågående</nve-radio>
<nve-radio value="done">Ferdigstilt</nve-radio>
</nve-radio-group>
<nve-radio-group label="Hva er status på tiltaket? (medium)">
<nve-radio value="planned">Planlagt</nve-radio>
<nve-radio value="current">Pågående</nve-radio>
<nve-radio value="done">Ferdigstilt</nve-radio>
</nve-radio-group>
<nve-radio-group label="Hva er status på tiltaket? (large)" size="large">
<nve-radio value="planned">Planlagt</nve-radio>
<nve-radio value="current">Pågående</nve-radio>
<nve-radio value="done">Ferdigstilt</nve-radio>
</nve-radio-group>Hjelptekst
Bruk helpText for å vise hjelpetekst over feltet.
<nve-radio-group label="Hva er status på tiltaket?" helpText="Ditt valg påvirker mange!">
<nve-radio value="planned">Planlagt</nve-radio>
<nve-radio value="current">Pågående</nve-radio>
<nve-radio value="done">Ferdigstilt</nve-radio>
</nve-radio-group>Hvis hjelpeteksten skal inneholde mer enn vanlig tekst, for eksempel en lenke, kan du bruke helpText-sporet.
Du kan ikke bruke helpText-attributtet og helpText-sporet samtidig. Hvis begge er angitt, prioriteres attributtet.
Se tilgjengelighet for informasjon om hvordan hjelpeteksten med en lenke bør struktureres.
<nve-radio-group label="Hva er status på tiltaket?">
<p slot="helpText">Se <a href="#">hvordan statusene brukes</a></p>
<nve-radio value="planned">Planlagt</nve-radio>
<nve-radio value="current">Pågående</nve-radio>
</nve-radio-group>Hint-tekst
Bruk hint for å vise hint-tekst under feltet.
<nve-radio-group label="Hva er status på tiltaket?" hint="Velg smart. Det finnes ingen vei tilbake fra dårlige valg.">
<nve-radio value="planned">Planlagt</nve-radio>
<nve-radio value="current">Pågående</nve-radio>
<nve-radio value="done">Ferdigstilt</nve-radio>
</nve-radio-group>Hvis hintteksten skal inneholde mer enn vanlig tekst, for eksempel en lenke, kan du bruke hintText-sporet.
Du kan ikke bruke hint-attributtet og hintText-sporet samtidig. Hvis begge er angitt, prioriteres attributtet.
Hvis hjelpeteksten eller hintet inneholder en lenke, bør lenketeksten beskrive hva brukeren finner når lenken åpnes. Unngå generelle tekster som "Les mer". Da gir lenken mening også når den leses opp sammen med gruppens ledetekst, eller navigeres til separat med skjermleser.
<nve-radio-group label="Hva er status på tiltaket?">
<p slot="hintText">Les om <a href="#">hva de ulike statusene betyr</a></p>
<nve-radio value="planned">Planlagt</nve-radio>
<nve-radio value="current">Pågående</nve-radio>
</nve-radio-group>Deaktivert
Bruk attributtet disabled for å hindre at verdien kan endres i hele gruppen. For å deaktivere enkelte radioknapper, bruk disabled direkte på dem.
<nve-radio-group label="Hva er status på tiltaket?" disabled>
<nve-radio value="planned">Planlagt</nve-radio>
<nve-radio value="current">Pågående</nve-radio>
<nve-radio value="done">Ferdigstilt</nve-radio>
</nve-radio-group>Forhåndsvalgte verdier
Bruk value for å vise en forhåndsvalgt verdi. Verdien må samsvare med value-attributtet til en av nve-radio-komponentene i gruppen.
<nve-radio-group label="Hva er status på tiltaket?" value="current">
<nve-radio value="planned">Planlagt</nve-radio>
<nve-radio value="current">Pågående</nve-radio>
<nve-radio value="done">Ferdigstilt</nve-radio>
</nve-radio-group>Validering
For mer informasjon om hvordan nve-radio-group og andre skjemakomponenter valideres, se siden om validering.
Intern validering
Intern validering gjør det mulig å validere verdien i nve-radio-group ved hjelp av valideringsregler.
Valideringsreglene kjøres når du kaller validateForm() i skjemaets submit-handler.
Du kan importere metoden slik:
import { validateForm } from 'nve-designsystem/validation/validateForm.js';<form id="test-form" class="form">
<nve-radio-group id="rdgr" required label="Hva er status på tiltaket?">
<nve-radio value="planned">Planlagt</nve-radio>
<nve-radio value="current">Pågående</nve-radio>
<nve-radio value="done">Ferdigstilt</nve-radio>
</nve-radio-group>
<nve-button type="submit">Send inn</nve-button>
</form>
<script type="module">
const form = document.querySelector('#test-form');
const rdgr = document.querySelector('#rdgr');
rdgr.validationRules = [(value) => rules.required(value) || 'Feltet er påkrevd'];
form?.addEventListener('submit', (event) => {
event.preventDefault();
validateForm(event);
});
</script>Ekstern validering
Bruker du et eksternt valideringssystem, kan du sette komponenten i feiltilstand ved hjelp av errorMessage.
<form id="test-form" class="form">
<nve-radio-group id="rdgr" required label="Hva er status på tiltaket?" errorMessage="Feltet er påkrevd">
<nve-radio value="planned">Planlagt</nve-radio>
<nve-radio value="current">Pågående</nve-radio>
<nve-radio value="done">Ferdigstilt</nve-radio>
</nve-radio-group>
<nve-button type="submit">Send inn</nve-button>
</form>Du kan fjerne feiltilstanden ved å sette errorMessage til en tom streng.
<form id="test-form" class="form">
<nve-radio-group id="rdgr" label="Hva er status på tiltaket?" errorMessage="">
<nve-radio value="planned">Planlagt</nve-radio>
<nve-radio value="current">Pågående</nve-radio>
<nve-radio value="done">Ferdigstilt</nve-radio>
</nve-radio-group>
<nve-button type="submit">Send inn</nve-button>
</form>Tilgjengelighet
Radiogruppen er implementert i tråd med anbefalingene i WAI-ARIA Authoring Practices Guide for radiogrupper, for å støtte tilgjengelig bruk i samsvar med WCAG.
- Siden radiogruppen er bygget med fieldset og legend, kan den første radioknappen som får fokus ved tab-navigasjon lese opp ledeteksten sammen med eventuell tilleggstekst fra helpText, hint og errorMessage. Tillegsteksten legges til i aria-describedby på fieldset. (VoiceOver i Safari på macOS kan slite litt med aria-describedby og ikke lese den).
- nve-radio har intern tilstand for checked, pos og setsize, som styres av nve-radio-group. Disse brukes til å sette riktige ARIA-attributter (aria-checked aria-posinset,aria-setsize) på radio-knappen.
- aria-posinset og aria-setsize brukes for å fortelle brukeren hvor i gruppen den aktuelle radio-knappen ligger, og hvor mange valg som finnes totalt.
- aria-disabled og aria-invalid settes på nve-radio basert på egenskapene disabled og invalid.
Spor
| Navn | Beskrivelse |
|---|---|
| helpText | - viser hjelpetekst over inputfeltet |
| hintText | - viser hint-tekst under inputfeltet |
Hendelser
| Navn | Arvet fra | Beskrivelse |
|---|---|---|
| change | når en radio-knapp i gruppen blir valgt. Inneholder den valgte verdien. |
Egenskaper
| Navn | Type | Arvet fra | Beskrivelse | Reflected |
|---|---|---|---|---|
| testId | string | undefined = undefined | |||
| disabled | = false | Om radio-gruppen er deaktivert | ||
| errorMessage | string | undefined = undefined | Feilmelding som vises ved valideringsfeil. Hvis den er satt blir input-felt ugyldig og feil melding vises | ||
| helpText | string = undefined | Hjelpetekst som vises over feltet | ||
| hint | string = undefined | Hint-tekst som vises under feltet | ||
| label | string | undefined = undefined | Ledetekst for radio-gruppen | ||
| orientation | 'horizontal' | 'vertical' = 'vertical' | Retning for gruppen av radioknapper | ||
| required | = false | Om inputfeltet er obligatorisk | ||
| optional | = false | Om radio-gruppen er valgfri | ||
| requiredLabel | string = undefined | Tekst som vises i merket for obligatoriske felt | ||
| optionalLabel | string = undefined | Tekst som vises i merket for valgfrie felt | ||
| hideRequiredTag | = false | Om merket for obligatoriske felt skal skjules | ||
| size | 'small' | 'medium' | 'large' = 'medium' | Størrelse på radio-knappene | ||
| tooltip | = '' | Tooltip-tekst for ledetekst | ||
| value | string = undefined | Verdi for den valgte radio-knappen | ||
| validationRules | Array<ValidationRule> = [] |
Metoder
| Navn | Parametre | Returtype | Arvet fra | Beskrivelse |
|---|---|---|---|---|
| validate |
Deler
| Navn | Beskrivelse |
|---|---|
| base | Hovedcontaineren for radio-gruppen, som er en fieldset. |
| label | Label-elementet som viser ledeteksten for gruppen. |
| radio-group | Containeren som holder alle radio-knappene. |
| help-text | Teksten som vises under ledeteksten for å gi ekstra informasjon. |
| hint-text | Teksten som vises under radio-knappene for å gi ekstra informasjon eller feilmeldinger. |
| error-text | Teksten som vises under radio-knappene for å vise feilmeldinger. |