Skip to content

FormLabel

Form label component with theme-aware styling and proper accessibility associations and required field indicators

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

import { FormLabel } from '@sparkle/ui'
PropTypeRequiredDefaultDescription
childrenReact.ReactNodeLabel children content
requiredboolean | undefinedWhether the field is required
disabledboolean | undefinedWhether the field is disabled
descriptionstring | undefinedOptional description text for the 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.