Select Dropdown
freeFully custom dropdown with option grouping, keyboard navigation, and extensive styling.
Overview
The Select Dropdown is a fully custom-built dropdown (not a native <select>) that gives you complete control over colors, fonts, and behavior. Supports option grouping, keyboard navigation, auto-direction detection, and a hidden input for Framer Forms compatibility.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
name | String | "selection" | Field name used in form data. |
label | String | "Selection" | Label displayed above the dropdown. |
placeholder | String | "Select an option" | Placeholder text shown when no option is selected. |
showPlaceholderOption | Boolean | false | Show the placeholder as a selectable "clear" option in the dropdown. |
options | Array | -- | List of options. Each has label (required), value (optional, defaults to label), and group (optional, for grouping). |
required | Boolean | false | Whether a selection must be made. |
Features
- Fully custom dropdown (not native <select>) for complete styling control
- Option grouping with styled group headers
- Keyboard navigation (arrow keys, Enter, Escape, Space)
- Auto-direction detection (opens up or down based on viewport space)
- Arrow icon customization (default chevron, custom SVG, or none)
- Hidden <input> for native Framer Forms compatibility
- 15+ styling properties for trigger, dropdown, and options
Tips
Use the group property on options to organize long lists (e.g., group by category).
Enable showPlaceholderOption to let users clear their selection.
The dropdown auto-detects available viewport space and opens upward if needed.
Validation
This component uses select validation. See the Validation Guide for details on configuring rules and error messages.