FormInput

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

Form input component with theme-aware styling for different input types with proper accessibility

Uses CSS custom properties from @sparkle/theme for consistent theming across light/dark modes and supports validation states with semantic colors.

Import

import { FormInput } from '@sparkle/ui'

Prop	Type	Default	Description
`type`	`"number" \| "text" \| "email" \| "password" \| "tel" \| "url" \| "search" \| undefined`	``	Input type
`size`	`"sm" \| "md" \| "lg" \| undefined`	``	Size variant for the input
`validationState`	`"default" \| "success" \| "error" \| undefined`	``	Validation state for styling
`placeholder`	`string \| undefined`	``	Input placeholder text
`disabled`	`boolean \| undefined`	``	Whether the field is disabled
`required`	`boolean \| undefined`	``	Whether the field is required
`value`	`string \| undefined`	``	Input value
`onChange`	`((event: React.ChangeEvent<HTMLInputElement, Element>) => void) \| undefined`	``	Input change handler
`onFocus`	`((event: React.FocusEvent<HTMLInputElement, Element>) => void) \| undefined`	``	Input focus handler
`onBlur`	`((event: React.FocusEvent<HTMLInputElement, Element>) => void) \| undefined`	``	Input blur handler
`onKeyDown`	`((event: React.KeyboardEvent<HTMLInputElement>) => void) \| undefined`	``	Input key down handler for keyboard navigation

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

You can customize the appearance by:

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