Komponenter
ErrorSummary
ErrorSummary er en oppsummering av feil. Den gir brukeren oversikt over feil eller mangler som må rettes på en side eller trinn, for å komme videre.
React
Unable to parse html
const Preview = () => { return ( <ErrorSummary> <ErrorSummary.Heading> For å gå videre må du rette opp følgende feil: </ErrorSummary.Heading> <ErrorSummary.List> <ErrorSummary.Item> <ErrorSummary.Link href='#'> Fødselsdato kan ikke være etter år 2005 </ErrorSummary.Link> </ErrorSummary.Item> <ErrorSummary.Item> <ErrorSummary.Link href='#'> Telefonnummer kan kun inneholde siffer </ErrorSummary.Link> </ErrorSummary.Item> <ErrorSummary.Item> <ErrorSummary.Link href='#'>E-post må være gyldig</ErrorSummary.Link> </ErrorSummary.Item> </ErrorSummary.List> </ErrorSummary> ); }; render(<Preview />)
- asChild
- Description
@deprecated This is not supported anymore, as the element needs to be `ds-error-summary`
- Type
ReactNode
| Name | Type | Default | Description |
|---|---|---|---|
| asChild | ReactNode | - | @deprecated This is not supported anymore, as the element needs to be `ds-error-summary` |
ErrorSummaryHeading
- level
- Description
Heading level. This will translate into any h1-6 level unless `asChild` is `true`
- Type
1 | 2 | 3 | 4 | 5 | 6- Default
2
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| level | 1 | 2 | 3 | 4 | 5 | 6 | 2 | Heading level. This will translate into any h1-6 level unless `asChild` is `true` |
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
ErrorSummaryItem
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
ErrorSummaryLink
- children
- Description
The content to display inside the link.
- Type
ReactNode
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The content to display inside the link. |
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
ErrorSummaryList
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
Bruk
ErrorSummary består av flere delkomponenter:
ErrorSummary.Headingdefinerer for overskriften.ErrorSummary.Listdefinerer listen med feil.- Hver feil representeres som en
ErrorSummary.Itemsom inneholder enErrorSummary.Link. - Hver
ErrorSummary.Linkmå ha enhreftil den unike identifikatoren for et skjemafelt, slik at brukeren kan navigere til riktig sted i skjemaet.
Eksempler
Bruk med tekstfelt
For å at ErrorSummary.Link skal navigere til feltene med feil, må feltene ha en unik id som samsvarer med href i lenken.
React
Unable to parse html
const WithForm = () => { return ( <> <Textfield label='Fornavn' id='fornavn' error='Fornavn må være minst 2 tegn' /> <Textfield label='Telefon' id='telefon' type='tel' error='Telefonnummer kan kun inneholde siffer' /> <ErrorSummary> <ErrorSummary.Heading> For å gå videre må du rette opp følgende feil: </ErrorSummary.Heading> <ErrorSummary.List> <ErrorSummary.Item> <ErrorSummary.Link href='#fornavn'> Fornavn må være minst 2 tegn </ErrorSummary.Link> </ErrorSummary.Item> <ErrorSummary.Item> <ErrorSummary.Link href='#telefon'> Telefonnummer kan kun inneholde siffer </ErrorSummary.Link> </ErrorSummary.Item> </ErrorSummary.List> </ErrorSummary> </> ); }; render(<WithForm />)
Flytte fokus
Under er et eksempel der vi flytter fokus til ErrorSummary når den blir synlig.
React
Unable to parse html
const ShowHide = () => { const [show, setShow] = useState(false); const summaryRef = useRef<HTMLDivElement>(null); useEffect(() => { if (show) { summaryRef.current?.focus(); } }, [show]); return ( <> <div style={{ display: 'grid', placeItems: 'center', marginBottom: 'var(--ds-size-4)', }} > <Button onClick={() => setShow(!show)}> {show ? 'Skjul' : 'Send inn skjema'} </Button> </div> {show && ( <ErrorSummary ref={summaryRef}> <ErrorSummary.Heading> For å gå videre må du rette opp følgende feil: </ErrorSummary.Heading> <ErrorSummary.List> <ErrorSummary.Item> <ErrorSummary.Link href='#fornavn'> Fornavn må være minst 2 tegn </ErrorSummary.Link> </ErrorSummary.Item> <ErrorSummary.Item> <ErrorSummary.Link href='#telefon'> Telefonnummer kan kun inneholde siffer </ErrorSummary.Link> </ErrorSummary.Item> </ErrorSummary.List> </ErrorSummary> )} </> ); }; render(<ShowHide />)
HTML
Klassenavnet ds-error-summary brukes på <ds-error-summary>-elementet.
Webkomponenten håndterer fokus når den blir synlig og aria-labelledby automatisk.
Vi legger en <ul class="ds-list"> etter heading som inneholder en liste med feil.
Hver feil er en <li> med en lenke (<a>) som har klassen ds-link og et href til det aktuelle feltet med feil.
CSS variabler og data-attributter
| Navn | Verdi |
|---|---|
| --dsc-errorsummary-background | var(--ds-color-danger-surface-tinted) |
| --dsc-errorsummary-border-radius | var(--ds-border-radius-md) |
| --dsc-errorsummary-padding | var(--ds-size-6) var(--ds-size-8) |
| --dsc-errorsummary-link-color | var(--ds-color-neutral-text-default) |
| --dsc-errorsummary-heading-color | var(--ds-color-danger-text-default) |
Ingen relevante data-attributter funnet.
Rediger denne siden på github.com (åpnes i ny fane)