Quick Start

Build a simple form page using Classic Theme components in minutes.

Create a Basic Form​

Let's create a contact form using Classic Theme components:

<script>
  import {
    Button,
    Input,
    Label,
    Card,
    CardHeader,
    CardTitle,
    CardContent,
    CardFooter,
  } from '@classic-homes/theme-svelte';

  let name = $state('');
  let email = $state('');
  let message = $state('');

  function handleSubmit() {
    console.log({ name, email, message });
    // Handle form submission
  }
</script>

<Card class="max-w-md mx-auto">
  <CardHeader>
    <CardTitle>Contact Us</CardTitle>
  </CardHeader>
  <CardContent class="space-y-4">
    <div class="space-y-2">
      <Label for="name">Name</Label>
      <Input id="name" bind:value={name} placeholder="Your name" />
    </div>
    <div class="space-y-2">
      <Label for="email">Email</Label>
      <Input id="email" type="email" bind:value={email} placeholder="your@email.com" />
    </div>
    <div class="space-y-2">
      <Label for="message">Message</Label>
      <Input id="message" bind:value={message} placeholder="Your message" />
    </div>
  </CardContent>
  <CardFooter>
    <Button onclick={handleSubmit}>Send Message</Button>
  </CardFooter>
</Card>

Using FormField for Validation​

For forms with validation, use the FormField component which combines label, input, and error handling:

<script>
  import {
    Button,
    FormField,
    Card,
    CardHeader,
    CardTitle,
    CardContent,
    CardFooter,
  } from '@classic-homes/theme-svelte';

  let email = $state('');
  let password = $state('');
  let emailError = $state('');
  let passwordError = $state('');

  function validate() {
    emailError = '';
    passwordError = '';

    if (!email.includes('@')) {
      emailError = 'Please enter a valid email address';
    }
    if (password.length < 8) {
      passwordError = 'Password must be at least 8 characters';
    }

    return !emailError && !passwordError;
  }

  function handleSubmit() {
    if (validate()) {
      // Submit form
    }
  }
</script>

<Card class="max-w-md mx-auto">
  <CardHeader>
    <CardTitle>Sign In</CardTitle>
  </CardHeader>
  <CardContent class="space-y-4">
    <FormField
      label="Email"
      type="email"
      bind:value={email}
      error={emailError}
      placeholder="your@email.com"
    />
    <FormField
      label="Password"
      type="password"
      bind:value={password}
      error={passwordError}
      placeholder="Enter password"
    />
  </CardContent>
  <CardFooter>
    <Button onclick={handleSubmit}>Sign In</Button>
  </CardFooter>
</Card>

Adding Feedback with Toast​

Show notifications using the toast system:

<script>
  import { Button, toastStore } from '@classic-homes/theme-svelte';

  function showSuccess() {
    toastStore.success('Form submitted successfully!');
  }

  function showError() {
    toastStore.error('Something went wrong. Please try again.');
  }
</script>

<div class="space-x-2">
  <Button onclick={showSuccess}>Show Success</Button>
  <Button variant="destructive" onclick={showError}>Show Error</Button>
</div>

Using Dialogs​

Create modal dialogs for confirmations or additional forms:

<script>
  import { Button, Dialog } from '@classic-homes/theme-svelte';

  let open = $state(false);
</script>

<Button onclick={() => (open = true)}>Open Dialog</Button>

<Dialog bind:open title="Confirm Action" description="Are you sure you want to continue?">
  {#snippet footer()}
    <div class="flex gap-2 justify-end">
      <Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
      <Button
        onclick={() => {
          /* handle confirm */ open = false;
        }}>Confirm</Button
      >
    </div>
  {/snippet}
</Dialog>

Next Steps​

Now that you've built your first components:

• Learn about Theming to customize colors and styles
• Explore Form Inputs for more input components
• Check out Layout Components for page structure