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>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
Bruk required for å vise et stjernesymbol på slutten av ledeteksten som markerer at feltet er påkrevd.
Bruk i tillegg requiredLabel for å vise en forklarende tekst sammen med stjernen (for eksempel 'obligatorisk'). Dette gir brukerne en bedre forståelse av at feltet er påkrevd, siden ikke alle brukere forstår eller oppfatter stjernesymbolet alene.
<nve-radio-group label="Hva er status på tiltaket?" required requiredLabel="Obligatorisk">
<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>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>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>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" 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" 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>
</CodeExamplePreview>
## Tilgjengelighet
Radiogruppen er implementert i tråd med [anbefalingene](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) i WAI-ARIA Authoring Practices Guide for radiogrupper, for å støtte tilgjengelig bruk i samsvar med WCAG.
- Siden radiogruppen er bygget med <span class="highlight">fieldset</span> og <span class="highlight">legend</span>, kan den første radioknappen som får fokus ved tab-navigasjon lese opp ledeteksten sammen med eventuell tilleggstekst fra <span class="highlight">helpText</span>, <span class="highlight">hint</span> og <span class="highlight">errorMessage</span>. Tillegsteksten legges til i <span class="highlight">aria-describedby</span> på <span class="highlight">fieldset</span>. (VoiceOver i Safari på macOS kan slite litt med <span class="highlight">aria-describedby</span> og ikke lese den).
- <span class="highlight">nve-radio</span> har intern tilstand for <span class="highlight">checked</span>, <span class="highlight">pos</span> og <span class="highlight">setsize</span>, som styres av <span class="highlight">nve-radio-group</span>. Disse brukes til å sette riktige ARIA-attributter (<span class="highlight">aria-checked</span> <span class="highlight">aria-posinset</span>,<span class="highlight">aria-setsize</span>) på radio-knappen.
- <span class="highlight">aria-posinset</span> og <span class="highlight">aria-setsize</span> brukes for å fortelle brukeren hvor i gruppen den aktuelle radio-knappen ligger, og hvor mange valg som finnes totalt.
- <span class="highlight">aria-disabled</span> og <span class="highlight">aria-invalid</span> settes på <span class="highlight">nve-radio</span> basert på egenskapene <span class="highlight">disabled</span> og <span class="highlight">invalid</span>.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 | = '' | Feilmelding som vises ved valideringsfeil. Hvis den er satt blir input-felt ugyldig og feil melding vises | ||
| helpText | = '' | Hjelpetekst som vises over feltet | ||
| hint | = '' | 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 | ||
| requiredLabel | = '' | Ekstra tekst som vises for obligatoriske felt. * er en standard og vises alltid | ||
| size | 'small' | 'medium' | 'large' = 'medium' | Størrelse på radio-knappene | ||
| tooltip | = '' | Tooltip-tekst for ledetekst | ||
| value | = '' | 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. |
| 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. |