Komponenter
Validation message
Validation message brukes til å vise tilbakemeldinger knyttet til validering av brukerinput, for eksempel feilmeldinger eller advarsler i skjema.
Unable to parse html
const Preview = () => { return <ValidationMessage>Dette er en valideringsmelding.</ValidationMessage>; }; render(<Preview />)
Bruk
Bruk klassenavnet ds-validation-message for å style en validation message.
Skjemafelt og status
Validation message vil automatisk kobles til skjemafelt, når den har attributtet data-field="validation", og ligger inni et field.
Skjemafeltet får aria-invalid="true" når validation message har data-color="danger", eller når data-color ikke er angitt.
CSS variabler og data-attributter
Størrelser styres med data-size og farger med data-color. Komponenten vil arve nærmeste forelder med disse satt.
| Navn | Verdi |
|---|---|
| --dsc-validation-message-color | var(--ds-color-danger-text-subtle) |
| --dsc-validation-message-icon-size | var(--ds-icon-size) |
| --dsc-validation-message-icon-url | url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M7.74%202.47a.75.75%200%200%201%20.53-.22h7.46a.75.75%200%200%201%20.53.22l5.27%205.27c.14.14.22.33.22.53v7.46a.75.75%200%200%201-.22.53l-5.27%205.27a.75.75%200%200%201-.53.22H8.27a.75.75%200%200%201-.53-.22l-5.27-5.27a.75.75%200%200%201-.22-.53V8.27a.75.75%200%200%201%20.22-.53zm1.29%205.5a.75.75%200%200%200-1.06%201.06L10.94%2012l-2.97%202.97a.75.75%200%201%200%201.06%201.06L12%2013.06l2.97%202.97a.75.75%200%201%200%201.06-1.06L13.06%2012l2.97-2.97a.75.75%200%200%200-1.06-1.06L12%2010.94z%22%2F%3E%3C%2Fsvg%3E") |
| --dsc-validation-message-spacing | var(--ds-size-2) |
Ingen relevante data-attributter funnet.
React
ValidationMessage
- 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. |