No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

This is a pre-release version and is not production ready. For new and ongoing projects, please refer to the latest Design System version.

Disabled Elements

Disabled states of input fields or buttons pose many accessibility issues.

  • ❌
    Disabled fields cannot be reached by pressing tab
  • ❌
    It's often unclear why something is disabled
  • ❌
    It's often unclear how to enable a disabled field or button
  • ❌
    Disabled fields have low contrast
  • ❌

    The disabled state of a field is not always obvious (hard to discern from an enabled field)

Common use cases and how to handle them.

Disabled button on forms with required fields

  • ❌

    Forms with required fields tend to have the send button disabled until all required fields are correctly filled. The issue here is that with long forms or on small devices it's sometimes hard to spot the one field that was missed.

  • ✔️

    Let the user make mistakes and help them to correct them. Mark the required fields with error messages, scroll to the first invalid field and help the user fill the form correctly.

Disabled button on form submit

  • ❌

    The user submits a form. While the client waits for the server response and to prevent double submission, the submit button gets disabled. The reason why this button gets disabled might not be obvious.

  • ✔️

    Provide a loading indicator or display a message that shows current progress when uploading large files. Disable duplicate form submissions internally by either aborting the current request and sending a new one or suppressing new submissions during loading. Offer a remedy if the request timed out or an error occurred on the server (reload the page, retry form submission, ...).

Disabled select options

  • ❌

    Some options in a radio button group or select field are disabled because they are not available at this time or with the current configuration. This can be confusing because it's often unclear why these options are not available or how to enable them.

  • ✔️

    There are multiple possible solutions, depending on the situation:

    • Don't display options that cannot be selected and reduce clutter in your UI.

    • If you need to inform the user that there are potentially more possible options, show instructions on how to enable these options.

    • Display read-only data as text and not in disabled form fields.
Please enter your firstname.
Please enter your lastname.
Please enter your phone number.
Please enter a valid email address.
Please enter your city.
Please enter your country.
Please enter your zip code.
Please answer this question.
Please answer this question.
You must agree to the terms and conditions.