mirror of
https://github.com/cloud-shuttle/leptos-shadcn-ui.git
synced 2026-05-15 02:50:45 +00:00
96 lines
1.7 KiB
Markdown
96 lines
1.7 KiB
Markdown
# Form Component API
|
|
|
|
A form container with built-in validation and state management.
|
|
|
|
---
|
|
|
|
## Installation
|
|
|
|
```toml
|
|
# Cargo.toml
|
|
[dependencies]
|
|
shadcn-ui-leptos-form = "0.7"
|
|
```
|
|
|
|
```rust
|
|
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
|
|
|
|
```rust
|
|
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
|
|
|
|
```css
|
|
.form {
|
|
space-y-6
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Accessibility
|
|
|
|
- Native HTML form validation
|
|
- Proper label association
|
|
- Error announcements
|
|
|
|
---
|
|
|
|
## TypeScript API
|
|
|
|
```typescript
|
|
interface FormProps {
|
|
onSubmit?: (event: FormEvent) => void;
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export const Form: React.FC<FormProps>;
|
|
```
|
|
|
|
---
|
|
|
|
*Source: [packages/leptos/form/src/default.rs](https://github.com/yourusername/leptos-shadcn-ui/blob/main/packages/leptos/form/src/default.rs)*
|