Feat: Component Select

[swayamk05]

Description

Adds a new Select component to the Frappe UI React library, providing a fully accessible dropdown selection input with multiple variants and states.

Features

• Three variants: subtle, outline, ghost — matching existing component patterns
• Validation states: success, warning, error for form feedback
• Loading state: Shows spinner and disables interaction
• Icon support: Options can include icons displayed in both trigger and dropdown
• Prefix/Suffix slots: Customizable content before/after the selected value
• Keyboard accessible: Built on Headless UI's Listbox for full a11y support

Implementation Details

• Uses @headlessui/react Listbox with non-deprecated components (ListboxOption instead of Listbox.Option)
• Object lookup pattern for variant/state styling (no switch statements)
• Semantic design tokens (ink-*, surface-*, outline-*) for theming consistency
• Integrates with existing Popover component for dropdown positioning
• TypeScript types exported from dedicated types.ts file

Files Added/Modified

• select.tsx — Main component implementation
• types.ts — TypeScript type definitions
• select.stories.tsx — Storybook stories with autodocs
• index.ts — Exports
• tests/select.tsx — Unit tests

Storybook

• Includes separate stories for each variant (Subtle, Outline, Ghost)
• All props have descriptions in argTypes
• Interactive controls for size, variant, state, disabled, loading

Testing

• ✅ Renders with placeholder
• ✅ Renders with initial value
• ✅ Calls onChange when selecting an option
• ✅ Disabled state works correctly
• ✅ Prefix renders correctly

Checklist

• Code follows project coding style
• Linting passes (pnpm lint:js)
• TypeScript types are correct (pnpm lint:types)
• Unit tests added and passing
• Storybook documentation added with autodocs
• No hardcoded colors — uses design tokens
• Uses non-deprecated Headless UI components
• Exports added to index.ts

select.component.mp4

[Gubbu77]

@shivamsn97 hi bro, do you know any projects done by this?

[b1ink0]

Now that we have base-ui in the repo, please refactor to use base-ui. This will also ensure that we don’t have to use the Popover component.