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.

Javascript Events

The primary way that the components communicate with the containing page is by dispatching javascript events. Interacting with them is as easy as listening for events like you do for any standard HTML component

Add Event Listener

To listen for an event, attach an event listener:

<dt-text id="my-text-input" name="my-text"></dt-text>

<script>
function myEventListener(evt) {
  console.log(evt);
}
document.getElementById('my-text-input').addEventListener('event-name', myEventListener);
</script>

Example: Change Event

A standard event for all of the form components is the change event. This gets triggered any time the value of a form component changes.

Let's take a look at the text field to see how you might use it.

<dt-text id="my-text-input" name="my-text"></dt-text>

<script>
function onChange(evt) {
  const detail = evt.detail;
  console.log(`input with name '${detail.field}' was changed to '${detail.newValue}`);
  // here is where you can fire an API request to save this value
}
document.getElementById('my-text-input').addEventListener('change', onChange);
</script>

All of the Event objects that are passed to the event listener will contain a detail property that has all of the data relevant to that event.

For this change event, the Event would have values like this:

{
  "type": "change",
  "detail": {
    "field": "my-text",
    "oldValue": "",
    "newValue": "[what the user typed]"
  },
  [...]
}