import { Meta, Canvas } from '@storybook/addon-docs/blocks';
import { CssVariables } from '../../.storybook/blocks';
import * as stories from './validation.stories';

<Meta of={stories} />

# Validation
> Validation sjekker om dataene brukeren har angitt i et skjema eller et input-felt er gyldige i forhold til forhåndsdefinerte regler. Den gir tilbakemelding til brukeren om eventuelle feil og forhindrer at ugyldige data sendes videre til systemet.

## Kode
- Legg klassen `validation` på typisk `<div>`
- Bruk `data-field="validation"` eller `data-field="counter"` for å knytte validering til et [field](?path=/docs/designsystem-field--docs)
<Canvas of={stories.Default} />

# Farger
- Bruk `data-color="danger | success | info | warning"`
<Canvas of={stories.Colors} />

<CssVariables component="validation" />