Form Actions

ActionButton.Form opens a dialog with form fields powered by @repo/form. It wraps Form and SubmitButton from @repo/form inside a dialog.

Basic Usage

<script lang="ts">
  import { ActionButton } from '@repo/actions'
  import { FormField } from '@repo/form'
  import { page } from '$app/state'
  import { superForm } from 'sveltekit-superforms/client'
  import { zod } from 'sveltekit-superforms/adapters'
  import { importSchema } from '$lib/domains/employees/utils/schemas'

  const form = superForm(page.data.importForm, {
    validators: zod(importSchema),
  })
  const formData = form.form
</script>

<ActionButton.Root>
  <ActionButton.Item>
    <ActionButton.Form label="Import Employees" {form} enctype="multipart/form-data" action="?/import">
      <FormField.Simple accessor="file" label="CSV File">
        {#snippet children({ props })}
          <FormField.FileField bind:value={$formData.file} accept="text/csv" {...props} />
        {/snippet}
      </FormField.Simple>
    </ActionButton.Form>
  </ActionButton.Item>
</ActionButton.Root>

Props

Prop	Type	Description
label	string	Trigger text and default dialog title
title	string	Optional override for dialog title
description	string	Dialog description, defaults to "Are you sure?"
form	SuperForm	Superform instance
children	Snippet	Form field content
enctype	string	Form encoding type (e.g. multipart/form-data)
action	string	Form action path

All additional props are forwarded to the underlying Form component from @repo/form.

Behavior

• On success: closes dialog, shows toast notification
• Renders SubmitButton and a "Close" button automatically
• Inherits all Form component functionality from @repo/form