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`	Trigger text
`icon`	`Component`	Optional trigger icon
`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

Basic Usage

Props

Behavior

On this page