leptos-shadcn-ui/docs/components/api/form.md

Form Component API

A form container with built-in validation and state management.

---

Installation

# Cargo.toml
[dependencies]
shadcn-ui-leptos-form = "0.7"

use shadcn_ui_leptos_form::Form;

---

Component API

Form

Prop	Type	Default	Description
on_submit	Option<Callback<FormEvent>>	None	Submit handler
class	MaybeProp<String>	None	Additional CSS classes

---

Usage Examples

Basic Form

use leptos::prelude::*;
use shadcn_ui_leptos_form::Form;
use shadcn_ui_leptos_input::Input;
use shadcn_ui_leptos_button::Button;

#[component]
pub fn MyForm() -> impl IntoView {
    let handle_submit = move |e: FormEvent| {
        e.prevent_default();
        // Handle form submission
    };

    view! {
        <Form on_submit=Some(handle_submit)>
            <div class="space-y-4">
                <Input name="email" input_type="email" placeholder="Email" />
                <Input name="password" input_type="password" placeholder="Password" />
                <Button variant=ButtonVariant::Primary>"Submit"</Button>
            </div>
        </Form>
    }
}

---

CSS Classes

.form {
    space-y-6
}

---

Accessibility

• Native HTML form validation
• Proper label association
• Error announcements

---

TypeScript API

interface FormProps {
  onSubmit?: (event: FormEvent) => void;
  className?: string;
  children?: React.ReactNode;
}

export const Form: React.FC<FormProps>;

---

Source: packages/leptos/form/src/default.rs