Select Input Element

The Select Input element handles single-select dropdown menus, supporting custom choices and pre-built dynamic lists like countries and phone dial codes.

Live Preview

Select Input Preview

Specifications

Select inputs offer structured choices for user data collection:

  • Option Lists: Choose between Custom choices, a pre-built Countries list, or Dial Codes.
  • Sizing: Select height from Small, Medium, or Large to match standard page layouts.
  • Visual Styles: Switch between Default, Underline, Filled, or Ghost modes.
  • Placeholder & Defaults: Include a Placeholder string that guides users until a selection is made.
  • Validation: Easily mark fields as Required to ensure valid data collection.
  • Styling: Apply custom background colors, borders, and shadows to the dropdown trigger.

AI Guidance

How to prompt for Select Inputs:

  • Add a dropdown menu for 'Choose a Plan' with options Basic, Pro, and Enterprise.
  • Create a country selector with an underline style.
  • Insert a large filled select input for service categories.