Skip to content

FormDescription

Form description component with theme-aware styling for providing additional field context

Automatically connects to form controls via aria-describedby Uses CSS custom properties from @sparkle/theme for consistent theming.

import { FormDescription } from '@sparkle/ui'
PropTypeRequiredDefaultDescription
childrenReact.ReactNodeDescription text content
disabledboolean | undefinedWhether the description is for a disabled field

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.