nve-segment-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-segment-group.
<nve-segment-group label="Hvilken gjenstand bruker du mest på jobb?">
<nve-segment value="computer">Datamaskin</nve-segment>
<nve-segment value="mobile">Mobil</nve-segment>
<nve-segment value="traditional">Papir og blyant</nve-segment>
</nve-segment-group>nve-segment 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-segment-group og nve-segment 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-segment-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-segment og change-hendelsen fra nve-segment-group som brukes for å lese brukerens valg.
Retningslinjer
nve-segment-group brukes når brukeren skal velge ett alternativ fra en liten gruppe gjensidig utelukkende valg.
Komponenten fungerer semantisk som en radiogruppe og passer godt til for eksempel visningsmodus, periode eller andre innstillinger der kun ett alternativ kan være aktivt om gangen.
Bruk nve-segment-group når:
- det finnes et lite antall alternativer
- kun ett alternativ kan være valgt om gangen
- alternativene har omtrent samme betydning og viktighet
- alle alternativene bør være synlige samtidig
nve-segment-group skal ikke brukes som faner. Segmenter representerer et valg av verdi, mens faner brukes til å navigere mellom ulike innholdsområder. Bruk en egen tab-komponent når valget styrer hvilket innholdspanel som vises.
Unngå segmentgruppen dersom det finnes mange alternativer eller alternativene inneholder mye tekst. I slike tilfeller vil en vanlig radiogruppe ofte være enklere å lese og bruke.
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-segment-group label="Hvilken gjenstand bruker du mest på jobb?">
<nve-segment value="computer">Datamaskin</nve-segment>
<nve-segment value="mobile">Mobil</nve-segment>
<nve-segment value="traditional">Papir og blyant</nve-segment>
</nve-segment-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-segment-group label="Hvilken gjenstand bruker du mest på jobb?">
<nve-toggletip slot="label-toggletip" aria-label="Les mer om tiltaket">
<span>Ekstra info her.</span>
</nve-toggletip>
<nve-segment value="computer">Datamaskin</nve-segment>
<nve-segment value="mobile">Mobil</nve-segment>
<nve-segment value="traditional">Papir og blyant</nve-segment>
</nve-segment-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-segment-group label="Hvilken gjenstand bruker du mest på jobb?" required requiredLabel="Obligatorisk">
<nve-segment value="computer">Datamaskin</nve-segment>
<nve-segment value="mobile">Mobil</nve-segment>
<nve-segment value="traditional">Papir og blyant</nve-segment>
</nve-segment-group>Hjelptekst
Bruk helpText for å vise hjelpetekst over feltet.
<nve-segment-group size="small" label="Hvilken gjenstand bruker du mest på jobb?" helpText="Ditt valg påvirker mange!">
<nve-segment value="computer">Datamaskin</nve-segment>
<nve-segment value="mobile">Mobil</nve-segment>
<nve-segment value="traditional">Papir og blyant</nve-segment>
</nve-segment-group>Hint-tekst
Bruk hint for å vise hint-tekst under feltet.
<nve-segment-group
label="Hvilken gjenstand bruker du mest på jobb?"
hint="Velg smart. Det finnes ingen vei tilbake fra dårlige valg."
>
<nve-segment value="computer">Datamaskin</nve-segment>
<nve-segment value="mobile">Mobil</nve-segment>
<nve-segment value="traditional">Papir og blyant</nve-segment>
</nve-segment-group>Størrelse
Størrelsen styres på gruppenivå. Bruk size for å velge størrelse:
- small
- medium - er standard
- large
<nve-segment-group size="small" label="Hvilken gjenstand bruker du mest på jobb? (small)">
<nve-segment value="computer">Datamaskin</nve-segment>
<nve-segment value="mobile">Mobil</nve-segment>
<nve-segment value="traditional">Papir og blyant</nve-segment>
</nve-segment-group>
<nve-segment-group label="Hvilken gjenstand bruker du mest på jobb? (medium)">
<nve-segment value="computer">Datamaskin</nve-segment>
<nve-segment value="mobile">Mobil</nve-segment>
<nve-segment value="traditional">Papir og blyant</nve-segment>
</nve-segment-group>
<nve-segment-group size="large" label="Hvilken gjenstand bruker du mest på jobb? (large)">
<nve-segment value="computer">Datamaskin</nve-segment>
<nve-segment value="mobile">Mobil</nve-segment>
<nve-segment value="traditional">Papir og blyant</nve-segment>
</nve-segment-group>Rammestil
Segmentene i gruppen kan vises med avrundede kanter på de ytterste segmentene. Bruk pill-attributtet på nve-segment-group for å aktivere denne stilen.
<nve-segment-group label="Hvilken gjenstand bruker du mest på jobb?" pill>
<nve-segment value="computer">Datamaskin</nve-segment>
<nve-segment value="mobile">Mobil</nve-segment>
<nve-segment value="traditional">Papir og blyant</nve-segment>
</nve-segment-group>Deaktivert
Bruk attributtet disabled for å hindre at verdien kan endres i hele gruppen. For å deaktivere enkelte segmenter, bruk disabled direkte på dem.
Disabled bør brukes med måte, ettersom deaktiverte kontroller kan være vanskelige for noen brukere å forstå eller oppdage, særlig for dem som bruker hjelpemiddelteknologi. Når det er mulig, bør man vurdere å la kontrolleren være aktiv og heller gi tydelig veiledning eller valideringsmeldinger som forklarer hva som må gjøres før handlingen kan fullføres.
<nve-segment-group label="Hvilken gjenstand bruker du mest på jobb?" disabled>
<nve-segment value="computer">Datamaskin</nve-segment>
<nve-segment value="mobile">Mobil</nve-segment>
<nve-segment value="traditional">Papir og blyant</nve-segment>
</nve-segment-group>Forhåndsvalgt verdi
Bruk value for å vise en forhåndsvalgt verdi. Verdien må samsvare med value-attributtet til en av nve-segment-komponentene i gruppen.
<nve-segment-group label="Hvilken gjenstand bruker du mest på jobb?" value="traditional">
<nve-segment value="computer">Datamaskin</nve-segment>
<nve-segment value="mobile">Mobil</nve-segment>
<nve-segment value="traditional">Papir og blyant</nve-segment>
</nve-segment-group>Validering
For mer informasjon om hvordan nve-segment-group og andre skjemakomponenter valideres, se siden om validering.
Intern validering
Intern validering gjør det mulig å validere verdien i nve-segment-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-segment-group id="sgr" label="Hvilken gjenstand bruker du mest på jobb?">
<nve-segment value="computer">Datamaskin</nve-segment>
<nve-segment value="mobile">Mobil</nve-segment>
<nve-segment value="traditional">Papir og blyant</nve-segment>
</nve-segment-group>
<nve-button type="submit">Send inn</nve-button>
</form>
<script type="module">
const form = document.querySelector('#test-form');
const sgr = document.querySelector('#sgr');
sgr.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-segment-group label="Hvilken gjenstand bruker du mest på jobb?" errorMessage="Feltet er påkrevd">
<nve-segment value="computer">Datamaskin</nve-segment>
<nve-segment value="mobile">Mobil</nve-segment>
<nve-segment value="traditional">Papir og blyant</nve-segment>
</nve-segment-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-segment-group label="Hvilken gjenstand bruker du mest på jobb?" errorMessage="">
<nve-segment value="computer">Datamaskin</nve-segment>
<nve-segment value="mobile">Mobil</nve-segment>
<nve-segment value="traditional">Papir og blyant</nve-segment>
</nve-segment-group>
<nve-button type="submit">Send inn</nve-button>
</form>Tilgjengelighet
Segmentgruppen 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 segmentgruppen er bygget med fieldset og legend, kan den første segment-knappen 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-segment har intern tilstand for checked, pos og setsize, som styres av nve-segment-group. Disse brukes til å sette riktige ARIA-attributter (aria-checked aria-posinset,aria-setsize) på segment-knappen.
- aria-posinset og aria-setsize brukes for å fortelle brukeren hvor i gruppen den aktuelle segment-knappen ligger, og hvor mange valg som finnes totalt.
- aria-disabled og aria-invalid settes på nve-segment basert på egenskapene disabled og invalid.
Hendelser
| Navn | Arvet fra | Beskrivelse |
|---|---|---|
| change | når en segment-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 | ||
| pill | = false | Om segment skal ha pill-stil | ||
| required | = false | Om inputfeltet er obligatorisk | ||
| requiredLabel | string = undefined | 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 | 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 segment-gruppen, som er en fieldset. |
| help-text | Teksten som vises under ledeteksten for å gi ekstra informasjon. |
| hint-text | Teksten som vises under segment-knappene for å gi ekstra informasjon eller feilmeldinger. |
| error-text | Teksten som vises under segment-knappene for å vise feilmeldinger. |