🎯 Custom Dropdown Form Component

A pixel-perfect, production-ready custom dropdown/select component built with Vue 3 Composition API, featuring seamless design, accessibility compliance, and modern development practices.

✨ Features

• Custom Dropdown Component - Fully reusable with v-model pattern and ARIA attributes
• Pixel-Perfect Design - Seamless border merging, smooth animations, professional styling
• Vue 3 Composition API - Modern <script setup> syntax with clean, maintainable code
• WCAG Accessibility - Complete accessibility compliance with semantic HTML and ARIA labels
• Responsive Design - Mobile, tablet, and desktop ready
• Custom Typography - Neue Montreal Bold for buttons/inputs + JetBrains Mono for labels
• Form Validation - Required field validation with user feedback
• CSS Animations - Smooth transitions and dropdown animations

🏗️ Project Structure

src/
├── components/
│   ├── CustomDropdown.vue      # Reusable dropdown component
│   ├── FormInput.vue           # Reusable input component
│   └── ContactForm.vue         # Main form container
├── composables/
│   └── useFormState.js         # Form visibility state management
├── constants/
│   └── index.js                # Centralized config (colors, fields)
├── assets/
│   └── main.css                # Global styles & font declarations
├── App.vue                     # Root component
└── main.js                     # Entry point

public/
└── fonts/
    └── PPNeueMontreal-Bold.otf # Custom font file

🚀 Quick Start

Installation

npm install

Development

npm run dev

Opens the dev server at http://localhost:5173 with hot module reloading.

Production Build

npm run build

Creates an optimized production build in the dist/ folder.

📋 Form Fields

The contact form includes:

1. Budget - Custom dropdown with predefined options
2. Timeline - Custom dropdown select
3. How Did You Find Us? - Custom dropdown
4. Favorite Movie - Text input field
5. Submit Button - "LFG" with validation
6. Close Button - Form dismissal

🎨 Design Details

• Color Scheme: Black background, cream borders (#FFFEF4), green accents (#00ff6a)
• Typography:
  • Labels: JetBrains Mono (Google Fonts, weight 400)
  • Inputs/Buttons: Neue Montreal Bold (local, weight 700)
• Spacing: 8px gap between labels and inputs, 330px fixed width for all form controls
• Animations: Smooth dropdown open/close with CSS transitions

♿ Accessibility

• WCAG compliant with proper ARIA attributes
• Semantic HTML structure
• Proper label-to-input associations
• Tab navigation support
• Screen reader friendly

🔧 Technology Stack

• Vue 3 - Progressive JavaScript framework
• Vite - Next-generation build tool
• CSS 3 - Scoped styling with animations
• JavaScript ES6+ - Modern syntax throughout

🛠️ Development Setup

Recommended IDE Setup

VS Code + Vue (Official) (disable Vetur if installed)

Browser DevTools

• Chrome/Edge/Brave: Vue.js devtools
• Firefox: Vue.js devtools

📝 Component API

CustomDropdown.vue

<CustomDropdown 
  v-model="selectedValue"
  :options="dropdownOptions"
  label="Select an option"
  placeholder="Choose one..."
/>

FormInput.vue

<FormInput
  v-model="inputValue"
  id="favorite-movie"
  label="Favorite Movie"
  type="text"
  placeholder="Enter a movie..."
/>

🎓 Code Quality

• Modern Vue 3 patterns
• Clean, maintainable code structure
• No console errors or warnings
• Comprehensive inline documentation
• Responsive and accessible design

📦 Building for Production

npm run build

The build output is in the dist/ directory, ready for deployment to any static host (Vercel, Netlify, GitHub Pages, etc.).

📄 License

This project is part of a take-home assessment.