Dropdowns & Multiple Selections

Master the art of creating interactive dropdown menus and selection interfaces that enhance user experience on your websites.

🎯

Why Learn This?

Dropdowns and selection interfaces are everywhere in modern web applications. From forms to filters, they help users make choices efficiently without cluttering the interface.

User Experience

Clean, organized choice presentation

Space Saving

Compact way to show many options

Mobile Friendly

Perfect for touch interfaces

1. Basic HTML Select Dropdown

HTML Code

<label for="fruit" class="block text-sm font-medium text-gray-700">
  Choose a fruit:
</label>
<select 
  id="fruit" 
  class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
>
  <option value="">Select a fruit</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

Live Demo

Choose your favorite fruit:

2. Multiple Selection with Checkboxes

React Code Example

const [selectedSkills, setSelectedSkills] = useState([]);

const toggleSkill = (skill) => {
  setSelectedSkills(prev =>
    prev.includes(skill)
      ? prev.filter(s => s !== skill)
      : [...prev, skill]
  );
};

{skills.map(skill => (
  <label key={skill} className="flex items-center space-x-3 p-2 hover:bg-gray-50 rounded-lg cursor-pointer">
    <input
      type="checkbox"
      checked={selectedSkills.includes(skill)}
      onChange={() => toggleSkill(skill)}
      className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
    />
    <span className="text-gray-700">{skill}</span>
  </label>
))}

3. Custom Styled Dropdown

Tailwind CSS Styling

// Custom dropdown with Tailwind
<button 
  onClick={() => setIsOpen(!isOpen)}
  className="w-full px-4 py-3 text-left bg-white border border-gray-300 rounded-lg shadow-sm hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
>
  {selectedFramework || 'Select a framework'}
</button>

{isOpen && (
  <div className="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-60 overflow-y-auto">
    {frameworks.map(framework => (
      <div
        key={framework}
        onClick={() => handleSelect(framework)}
        className="px-4 py-3 hover:bg-blue-50 cursor-pointer transition-colors duration-150"
      >
        {framework}
      </div>
    ))}
  </div>
)}

Choose Your Framework

4. Visual Multiple Selection

Sometimes visual selections work better than text. Here's a color picker example:

Red

Blue

Green

Yellow

Purple

Pink

💡 Best Practices

Clear Labels

Always label your dropdowns clearly

Mobile First

Design for touch interfaces first

Accessibility

Use proper ARIA labels and keyboard navigation

Visual Feedback

Provide clear selection states

Ready to Build Amazing Interfaces?

Practice these dropdown and selection patterns in your next project. Remember, great UX comes from thoughtful interactions!