UserForm

A form component for creating and editing users. Handles name, email, and status fields with validation. Automatically detects create vs edit mode based on provided user prop.

Installation

typescript

import { UserForm } from '@happyvertical/smrt-users/svelte';

Create Mode

When no user is provided, the form operates in create mode with empty fields.

svelte

<script lang="ts">
  function handleSubmit(data) {
    console.log('Creating user:', data);
  }
</script>

<UserForm onsubmit={handleSubmit} />

Edit Mode

Provide existing user and profile data to pre-fill the form. Note that email cannot be changed after creation.

svelte

<UserForm
  user={existingUser}
  profile={existingProfile}
  onsubmit={handleUpdate}
  oncancel={() => console.log('Cancelled')}
/>

Loading State

Set loading to true to disable the form during submission.

svelte

<UserForm
  onsubmit={handleSubmit}
  loading={isLoading}
/>

With Cancel Button

The cancel button only appears when an oncancel handler is provided.

svelte

<UserForm
  onsubmit={handleSubmit}
  oncancel={() => console.log('Form cancelled')}
/>

Props

Prop	Type	Default	Description
`user`	`User \| null`	`null`	Existing user object for edit mode. When null, form is in create mode
`profile`	`Profile \| null`	`null`	Existing profile object to pre-fill the name field
`onsubmit` *	`(data: { name: string; email: string; status: UserStatus }) => void`	-	Callback when the form is submitted
`oncancel`	`() => void`	-	Callback for cancel button. Button is hidden if not provided
`loading`	`boolean`	`false`	Disables form inputs and shows loading state

TypeScript

typescript

import type { User, UserStatus } from '@happyvertical/smrt-users';
import type { Profile } from '@happyvertical/smrt-profiles';

interface Props {
  user?: User | null;
  profile?: Profile | null;
  onsubmit: (data: { name: string; email: string; status: UserStatus }) => void;
  oncancel?: () => void;
  loading?: boolean;
}

// UserStatus = 'active' | 'pending' | 'suspended' | 'deactivated'