Code
<script lang="ts">
import { FormField, Input, useFormField } from 'svelora';
</script>
<FormField label="Email" name="email">
<Input placeholder="you@example.com" />
</FormField>
<!-- Inside a child component -->
const formField = useFormField();
useFormField
Access the nearest FormField context from any child component. Provides reactive access to name, size, error, and ariaId.
Basic
Child form controls automatically inherit size, error state, name, and ariaId from the
parent FormField via useFormField().
Choose a unique username
We'll never share your email
Size Inheritance
The Input automatically picks up the size from FormField — no need to pass it explicitly.
Error Propagation
When FormField has an error, child inputs automatically get error styling and ARIA attributes via the shared context.
Works with All Form Controls
All form components (Input, Select, Switch, Checkbox, etc.) consume the same FormField context via useFormField().
Your legal full name
Select your country
You must accept the terms
How It Works
Context Shape
interface FormFieldContext {
name?: string // Form field name for submission
size: 'sm' | 'md' | 'lg' // Inherited size
error?: string | boolean // Error state/message
ariaId: string // ARIA ID for accessibility
}Usage in Custom Components
import { useFormField } from 'svelora'
const formField = useFormField()
// formField?.name → 'email'
// formField?.size → 'md'
// formField?.error → 'Invalid email'
// formField?.ariaId → 'form-field-email'