Skip to content
Sparkle Design System

FormField

FormField

Section titled “FormField”

Form field wrapper component with theme-aware styling that manages accessibility and validation

Uses CSS custom properties from @sparkle/theme for consistent theming across light/dark modes and provides proper field grouping.

Import

Section titled “Import”
import { FormField } from '@sparkle/ui'

Props

Section titled “Props”
Prop Type Required Default Description
name string ✓ `` Field name for form submission and validation
validationState "default" | "success" | "error" | undefined `` Validation state of the field
size "sm" | "md" | "lg" | undefined `` Size variant for the field
children React.ReactNode ✓ `` Field children content

Theme Integration

Section titled “Theme Integration”

This component uses CSS custom properties from @sparkle/theme for consistent styling across light and dark modes.

Design Tokens Used

Section titled “Design Tokens Used”
  • --theme-*: Uses theme design tokens for consistent styling

You can customize the appearance by:

  1. Theme Variables: Modify theme tokens in your @sparkle/theme configuration
  2. CSS Classes: Apply custom CSS classes via the className prop
  3. CSS-in-JS: Use styled-components or emotion with the component

Accessibility

Section titled “Accessibility”

This component follows accessibility best practices with proper ARIA attributes and keyboard support.

Section titled “Related Components”

Additional Resources

Section titled “Additional Resources”