FormSelect

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 select component with theme-aware styling using Radix UI Select primitives

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

Import

import { FormSelect } from '@sparkle/ui'

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg" \| undefined`		“	Size variant for the select
`validationState`	`"default" \| "success" \| "error" \| undefined`		“	Validation state for styling
`placeholder`	`string \| undefined`		“	Placeholder text when no value is selected
`disabled`	`boolean \| undefined`		“	Whether the select is disabled
`required`	`boolean \| undefined`		“	Whether the select is required
`value`	`string \| undefined`		“	Select value
`onValueChange`	`((value: string) => void) \| undefined`		“	Select change handler
`children`	`React.ReactNode`	✓	“	Select children (SelectItem components)

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.