Form Fields

ActionButton.Remote can render generated fields by passing a schema. This keeps actions on SvelteKit remote forms while still supporting user input.

Basic Usage

<script lang="ts">
  import { ActionButton } from '@repo/actions'
  import { importEmployeesForm } from '$lib/domains/employees/database/employees.remote'
  import { importEmployeesSchema } from '$lib/domains/employees/utils/schemas'
</script>

<ActionButton.Root>
  <ActionButton.Item>
    <ActionButton.Remote label="Import Employees" form={importEmployeesForm} schema={importEmployeesSchema} />
  </ActionButton.Item>
</ActionButton.Root>

Props

Prop	Type	Description
label	string | Snippet	Trigger text or snippet
title	string	Optional override for dialog title
form	RemoteForm	Remote form from a *.remote.ts file
schema	Zod schema	Optional schema for generated fields
children	Snippet	Optional custom content

All additional props are forwarded to TypedForm.Remote from @repo/form.

Behavior

• Renders generated fields when schema is provided
• On success: closes dialog and shows toast notification
• Renders "OK" and "Close" buttons automatically