Components
Form
Form is a container for grouping form controls. Form provides a semantic container for form elements and handles form submission.
Form is a container for grouping form controls. Form provides a semantic container for form elements and handles form submission.
Examples
Basic Usage
Preview unavailable for this example in the static docs build.
Show code
function DefaultForm() {
const [name, setName] = useState('')
const [email, setEmail] = useState('')
return (
<Form onSubmit={(e) => {
e.preventDefault()
alert(`Name: ${name}, Email: ${email}`)
}}>
<VStack spacing={16}>
<TextField
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Name"
/>
<TextField
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Email"
type="email"
/>
<Button type="submit">Submit</Button>
</VStack>
</Form>
)
}With Validation
Preview unavailable for this example in the static docs build.
Show code
function WithValidationForm() {
const [name, setName] = useState('')
const [error, setError] = useState('')
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
if (!name.trim()) {
setError('Name is required')
return
}
setError('')
alert(`Submitted: ${name}`)
}
return (
<Form onSubmit={handleSubmit}>
<VStack spacing={16}>
<TextField
value={name}
onChange={(e) => {
setName(e.target.value)
setError('')
}}
placeholder="Name"
/>
{error && <Text style={{ color: '#FF3B30' }}>{error}</Text>}
<Button type="submit">Submit</Button>
</VStack>
</Form>
)
}Complex Form
Preview unavailable for this example in the static docs build.
Show code
function ComplexFormComponent() {
const [formData, setFormData] = useState({
firstName: '',
lastName: '',
email: '',
message: '',
})
return (
<Form onSubmit={(e) => {
e.preventDefault()
alert(JSON.stringify(formData, null, 2))
}}>
<VStack spacing={20}>
<Text style={{ fontSize: 24, fontWeight: 'bold' }}>Contact Form</Text>
<TextField
value={formData.firstName}
onChange={(e) => setFormData({ ...formData, firstName: e.target.value })}
placeholder="First Name"
/>
<TextField
value={formData.lastName}
onChange={(e) => setFormData({ ...formData, lastName: e.target.value })}
placeholder="Last Name"
/>
<TextField
value={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
placeholder="Email"
type="email"
/>
<TextField
value={formData.message}
onChange={(e) => setFormData({ ...formData, message: e.target.value })}
placeholder="Message"
/>
<Button type="submit">Send Message</Button>
</VStack>
</Form>
)
}API
| Prop | Type | Required | Description |
|---|---|---|---|
onSubmit | (event: FormEvent<HTMLFormElement>) => void | No | Form submission handler |
isValid | boolean | No | Form validation state |
Inherits additional props from Omit<IBaseElementComponent<'form'>, 'onSubmit' | 'noValidate'>.
Overview
Form is a container for grouping form controls. Form provides a semantic container for form elements and handles form submission.
SwiftUI Correspondence: Similar to SwiftUI's Form.
With Validation
Add validation to form fields:
Notes
- Form provides semantic HTML form element
- Form forwards native
onSubmithandling to the browser - Form supports all standard form controls (TextField, Toggle, Picker, etc.)
- Call
event.preventDefault()in your handler when you want client-side submission behavior - Use Form for better accessibility and semantic structure
Best Practices
- Validation: Always validate form inputs before submission
- Error handling: Provide clear error messages for invalid inputs
- Accessibility: Use proper labels and form structure
- User feedback: Provide visual feedback for form state (loading, success, error)
- Security: Validate and sanitize all user inputs on the server side