Form & Field

Composable form and field components for building accessible, validated forms with powerful state management.

Installation

Import

import { Form, Field } from '@svelte-atoms/core/form';

Preset Configuration

Customize the form appearance using presets

You can customize the default styles for Form and Field components by defining presets in your configuration:

Examples

Explore different form variations and use cases

Basic Form

Simple form with text inputs

Code

<script lang="ts">
  import { Form, Field } from '@svelte-atoms/core/form';
  import { Input } from '@svelte-atoms/core/input';
  import Button from '@svelte-atoms/core/button';
</script>

<Form class="w-full max-w-md space-y-4" onsubmit={(e) => e.preventDefault()}>
  <Field.Root>
    <Field.Label class="">Name</Field.Label>
    <Field.Control base={Input.Root}>
      <Input.Control bind:value={formData.name} class="" />
    </Field.Control>
  </Field.Root>
  
  <Field.Root>
    <Field.Label class="">Email</Field.Label>
    <Field.Control base={Input.Root}>
      <Input.Control 
        type="email" 
        bind:value={formData.email} 
        placeholder="Enter your email" 
        class="" 
      />
    </Field.Control>
  </Field.Root>
  
  <Button class="w-full">Submit</Button>
</Form>

Form with Validation

Form with built-in validation and error states

Code

<Form class="w-full max-w-md space-y-4" onsubmit={(e) => e.preventDefault()}>
  <Field.Root>
    <Field.Label class="">Email Address</Field.Label>
    <Field.Control base={Input.Root}>
      <Input.Control 
        type="email" 
        bind:value={formData.email} 
        placeholder="Enter your email" 
        required 
        class="" 
      />
    </Field.Control>
  </Field.Root>
  
  <Field.Root>
    <Field.Label class="">Password</Field.Label>
    <Field.Control base={Input.Root}>
      <Input.Control 
        type="password" 
        bind:value={formData.password} 
        placeholder="Enter your password" 
        required 
        minlength="8" 
        class="" 
      />
    </Field.Control>
    <p class="text-muted-foreground mt-1 text-xs">Password must be at least 8 characters</p>
  </Field.Root>
  
  <Button class="w-full">Create Account</Button>
</Form>

API Reference

Form

The root form component.

Prop

Type

Default

Description

class

string

Additional CSS classes to apply

onsubmit

function

Form submission handler

children

Snippet

Form content

Field.Root

Container for a form field including label, control, and errors.

Prop

Type

Default

Description

name

string

Field name for form data

value

any

Field value

class

string

Additional CSS classes

Field.Label

Label element for the form field.

Prop

Type

Default

Description

for

string

ID of the associated form control

class

string

Additional CSS classes

children

Snippet

Label content

Field.Control

Wrapper for the input control element.

Prop

Type

Default

Description

base

Component

Base component to wrap (e.g., Input.Root)

class

string

Additional CSS classes

children

Snippet

Control content (Input.Control, Textarea.Control, etc.)

Field.Errors

Component to display field error messages.

Prop

Type

Default

Description

class

string

Additional CSS classes

Accessibility

Built-in Accessibility Features

• Proper semantic form and input elements
• Label association with for/id attributes
• Keyboard navigation and focus management
• Built-in validation with aria-invalid
• Screen reader compatible error messages
• Support for required and optional fields

Dropdown

Input