FormLabel
FormLabel
Section titled “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
Section titled “Import”import { FormLabel } from '@sparkle/ui'| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
children | React.ReactNode | ✓ | “ | Label children content |
required | boolean | undefined | “ | Whether the field is required | |
disabled | boolean | undefined | “ | Whether the field is disabled | |
description | string | undefined | “ | Optional description text for the field |
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:
- Theme Variables: Modify theme tokens in your
@sparkle/themeconfiguration - CSS Classes: Apply custom CSS classes via the
classNameprop - 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.
Related Components
Section titled “Related Components”- Form
- FormControl
- FormDescription
- FormField
- FormInput
- FormMessage
- FormPassword
- FormSelect
- FormSelectItem
- FormSubmit
- FormTextarea