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>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(segment-group) for å fjerne avstanden over feltet.
<nve-segment-group class="hideLabel" 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>
<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(segment-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-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 merket «Må fylles ut». Bruk optional for å vise merket «Valgfritt». Teksten i required-merket kan overstyres med requiredLabel.
Bruk hideRequiredTag sammen med required for å skjule required-merket uten å endre at feltet er obligatorisk.
Attributtene requiredLabel og optionalLabel erstatter teksten i henholdsvis required-merket og optional-merket, uten å legge til et nytt merke. Standardtekstene er «Må fylles ut» og «Valgfritt». Bruk dem sammen med henholdsvis required og optional.
<nve-segment-group label="Hvilken gjenstand bruker du mest på jobb?" required>
<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?" optional>
<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>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.
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-segment-group label="Hvilken gjenstand bruker du mest på jobb?">
<p slot="helpText">Se <a href="#">hvordan du velger riktig arbeidsutstyr</a></p>
<nve-segment value="computer">Datamaskin</nve-segment>
<nve-segment value="mobile">Mobil</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>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-segment-group label="Hvilken gjenstand bruker du mest på jobb?">
<p slot="hintText">Les om <a href="#">hvilket utstyr som passer til ulike oppgaver</a></p>
<nve-segment value="computer">Datamaskin</nve-segment>
<nve-segment value="mobile">Mobil</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" required 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 required 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.
Spor
| Navn | Beskrivelse |
|---|---|
| helpText | - viser hjelpetekst over inputfeltet |
| hintText | - viser hint-tekst under inputfeltet |
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 | ||
| optional | = false | Om segmentgruppen 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å segment-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. |
| label | Label-elementet som viser ledeteksten for gruppen. |
| segment-group | Containeren som holder alle segment-knappene. |
| 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. |