Skip to content

FormTextarea

Form textarea component with theme-aware styling for multi-line text input

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

import { FormTextarea } from '@sparkle/ui'
PropTypeRequiredDefaultDescription
size"sm" | "md" | "lg" | undefinedSize variant for the textarea
validationState"default" | "success" | "error" | undefinedValidation state for styling
placeholderstring | undefinedTextarea placeholder text
disabledboolean | undefinedWhether the textarea is disabled
requiredboolean | undefinedWhether the textarea is required

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

  • --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

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