Form Field Error Message CSS

Displays an error message explaining what went wrong and how to resolve it.

Installation

Using npm

npm install @nl-design-system-candidate/form-field-error-message-css

Using pnpm

pnpm add @nl-design-system-candidate/form-field-error-message-css

If you use a CDN, you can import the CSS like this:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@nl-design-system-candidate/form-field-error-message-css/dist/form-field-error-message.css"
/>

If you don't use a CDN, you can import the CSS from node_modules/:

<link
  rel="stylesheet"
  href="node_modules/@nl-design-system-candidate/form-field-error-message-css/dist/form-field-error-message.css"
/>

If you use CSS imports from JavaScript:

import '@nl-design-system-candidate/form-field-error-message-css/dist/form-field-error-message.css';

If you use SCSS:

@use '@nl-design-system-candidate/form-field-error-message-css/forward.scss';

CSS classes

| name | description | | --------------------------------------- | --------------------------------------------------- | | .nl-form-field-error-message | The main class. Use it on a <div> element. | | .nl-form-field-error-message__icon | The icon container. Use it on a <div> element. | | .nl-form-field-error-message__content | The content container. Use it on a <div> element. |

SCSS mixins

| name | description | | -------------------------------------- | --------------------------------------- | | nl-form-field-error-message | Styles for the form field error message | | nl-form-field-error-message__icon | Styles for the icon | | nl-form-field-error-message__content | Styles for the content |

Usage

Place the Form Field Error Message below the Form Field Label and before the form control. Give the content element an id, and link it to the form control via aria-describedby.

<div>
  <label for="name">Name</label>
</div>
<div class="nl-form-field-error-message">
  <div id="name-error" class="nl-form-field-error-message__content">
    <p>The "Name" field is required.</p>
  </div>
</div>
<div>
  <input id="name" aria-describedby="name-error" aria-invalid="true" autocomplete="name" type="text" />
</div>

With an icon

Use nl-form-field-error-message__icon for an optional, decorative icon before the content. Hide it from assistive technology, since the text of the error message already conveys the meaning.

<div>
  <label for="name">Name</label>
</div>
<div class="nl-form-field-error-message">
  <div class="nl-form-field-error-message__icon">
    <span class="example-icon" aria-hidden="true">
      <!-- icon -->
    </span>
  </div>
  <div id="name-error" class="nl-form-field-error-message__content">
    <p>The "Name" field is required.</p>
  </div>
</div>
<div>
  <input id="name" aria-describedby="name-error" aria-invalid="true" autocomplete="name" type="text" />
</div>

SCSS usage

Import the mixins via forward (Sass internally uses _forward.scss) and use them in your own SCSS:

@use '@nl-design-system-candidate/form-field-error-message-css/forward.scss' as form-field-error-message;

.example-form-field-error-message {
  @include form-field-error-message.nl-form-field-error-message;
}

.example-form-field-error-message__icon {
  @include form-field-error-message.nl-form-field-error-message__icon;
}

.example-form-field-error-message__content {
  @include form-field-error-message.nl-form-field-error-message__content;
}

Depending on the tools used, it may be necessary to configure Sass with loadPaths so that @nl-design-system-candidate/form-field-error-message-css can be found in the node_modules folder. See Configuring Sass with loadPaths for more information.

Design Tokens

All NL Design System components are white label. Use Form Field Error Message design tokens to ensure it matches your brand styles. For more information about design tokens, see https://nldesignsystem.nl/handboek/huisstijl/design-tokens/.

See nldesignsystem.nl/form-field-error-message/#design-tokens for a full overview of the Form Field Error Message tokens. These tokens can be found in the tokens package @nl-design-system-candidate/form-field-error-message-tokens.

Other implementations

Want to use Form Field Error Message with React? Follow the instructions described in the React package @nl-design-system-candidate/form-field-error-message-react.

Want to use Form Field Error Message with other frameworks or vanilla JavaScript? The React component is based on the CSS package @nl-design-system-candidate/form-field-error-message-css.

Figma, Storybook and more

Read more about the Form Field Error Message in Dutch and find links to other resources like Figma and Storybook on https://nldesignsystem.nl/form-field-error-message.