PricingLoginStart free
Vue Academy · Lesson

Controls, Actions, and Args

argTypes for controls UI, actions addon for event logging, play() for interaction tests.

Lesson 3 of 413 steps

Controls, Actions, and Args is a free Vue Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 4 lessons in total.

Interactive Controls

Storybook’s Controls panel turns a story’s args into live form fields. You change a prop and the component re-renders instantly — no code edits. You shape these fields with argTypes.

Defining argTypes

argTypes describes each prop: its control type, options, and documentation. It sits on the meta object alongside args.

export default {
  component: Button,
  argTypes: {
    label: { control: "text" },
  },
}

Text and Boolean Controls

The control type chooses the widget. text gives an input box; boolean gives a toggle switch.

argTypes: {
  label: { control: "text" },
  disabled: { control: "boolean" },
}

Select Controls with options

For a fixed set of values use the select control with an options array. The panel renders a dropdown.

argTypes: {
  variant: {
    control: "select",
    options: ["primary", "secondary", "danger"],
  },
}

Color and Number Controls

Other handy controls: color opens a color picker, and number (or range) gives numeric input.

argTypes: {
  background: { control: "color" },
  count: { control: { type: "range", min: 0, max: 10 } },
}

The Actions Addon

The Actions addon logs events in a panel so you can confirm a component emits correctly. You wire an arg to a logging function with fn().

import { fn } from "@storybook/test"

export default {
  component: Button,
  args: {
    onClick: fn(),
  },
}

How fn() Works

fn() creates a spy that logs calls to the Actions panel. When the component invokes the handler (e.g. an emitted click mapped to onClick), you see the call and its arguments.

args: {
  onSubmit: fn(),
}
// Clicking submit logs "onSubmit" with payload in the Actions panel

Mapping Events to Handlers

Vue emits events; Storybook maps an on<Event> arg to that emission. An emitted update event surfaces through an onUpdate action arg.

argTypes: {
  onUpdate: { action: "update" },
}

The play Function

A story can include a play function that runs after render to simulate user interaction — clicking, typing — and assert on the result. This turns a story into an interaction test.

import { expect, userEvent, within } from "@storybook/test"

export const Clicks = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement)
    await userEvent.click(canvas.getByRole("button"))
  },
}

Asserting in play

Inside play you can assert with expect and check that an action was called, making interaction tests visible right in Storybook.

export const Submits = {
  args: { onSubmit: fn() },
  play: async ({ args, canvasElement }) => {
    const canvas = within(canvasElement)
    await userEvent.click(canvas.getByRole("button"))
    await expect(args.onSubmit).toHaveBeenCalled()
  },
}

Why Controls + Actions + play Matter

Together they make stories powerful: Controls explore props, Actions verify events fire, and play automates interactions and assertions — documentation and tests in one place.

Quick Check

Check your understanding of controls and actions.

Answer it in the interactive lesson

Recap

You learned controls, actions, and args:

  • argTypes shapes the Controls panel: text, boolean, select (with options), color, number/range.
  • The Actions addon logs events; wire handlers with fn() or map events via action.
  • The play function runs after render to simulate interactions with userEvent and assert with expect.
  • Together they make stories explorable, verifiable, and self-documenting.
Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses
42
Lessons
156
Start learning freeView the full course

Frequently Asked Questions

Is the “Controls, Actions, and Args” lesson free?

Yes — any 3 lessons of the Vue Academy learning path, including “Controls, Actions, and Args”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 4 lessons in total.

What will I learn in “Controls, Actions, and Args”?

argTypes for controls UI, actions addon for event logging, play() for interaction tests. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

How long does the “Controls, Actions, and Args” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Setting Up Storybook for Vue 3
  2. Writing Component Stories
  3. Controls, Actions, and Args
  4. Storybook Addons and Accessibility Testing
← Back to Vue Academy