Form

A form component with per-field validation, error messages, and ARIA accessibility.

Basic Form

A simple contact form with required fields.

With Validation Rules

Form fields with min/max length and pattern validation.

Live Validation (onChange)

Validates fields as you type.

Usage

julia

using Suite

Form(action="/api/submit",
    FormField(name="email",
        FormItem(
            FormLabel("Email"),
            FormControl(
                Input(type="email", placeholder="Enter your email"),
            ),
            FormDescription("We'll never share your email."),
            FormMessage(),
        ),
        required=true,
        pattern="[^@]+@[^@]+",
        pattern_message="Please enter a valid email address",
    ),
    Button(type="submit", "Submit"),
)

Component Structure

Form fields follow a consistent nesting pattern for accessibility and validation:

julia

Form(...)               # Form container
FormField(name=...,     # Field with validation rules
    FormItem(            # Layout wrapper
        FormLabel(...),      # Accessible label
        FormControl(         # Control wrapper (display:contents)
            Input(...),      #   Your actual input/textarea/select
        ),
        FormDescription(...), # Helper text
        FormMessage(),        # Error message (hidden until invalid)
    ),
)

Validation Modes

Mode	Description
"submit"	Validate all fields on form submit (default)
"change"	Validate each field as the user types
"blur"	Validate each field when it loses focus

API Reference

Form

Prop	Type	Default	Description
action	String	""	Form action URL
method	String	"post"	Form method
validate_on	String	"submit"	Validation mode: submit, change, or blur
class	String	""	Additional CSS classes
theme	Symbol	:default	Theme name

FormField

Prop	Type	Default	Description
name	String	required	Field name
required	Bool	false	Whether the field is required
required_message	String	"This field is required"	Custom required error message
min_length	Int	0	Minimum length (0 = no minimum)
min_length_message	String	""	Custom min length error message
max_length	Int	0	Maximum length (0 = no maximum)
max_length_message	String	""	Custom max length error message
pattern	String	""	Regex pattern for validation
pattern_message	String	""	Custom pattern error message
min	String	""	Minimum value (for number inputs)
max	String	""	Maximum value (for number inputs)
custom_message	String	""	Default error message