🔽 Dropdowns & Validation
Simple Alpine.js dropdown menus and form validation examples
🔽 Simple Dropdowns
Basic dropdown menus built with Alpine.js and Tailwind CSS
Basic Select Dropdown
Electronics
Clothing
Home & Garden
Sports
Multi-Select Dropdown
Free Shipping
Same Day Delivery
Gift Wrapping
Selected:
✅ Simple Form Validation
Basic form validation with Alpine.js
💻 Code Examples
Simple Alpine.js patterns for dropdowns and validation
Basic Dropdown Pattern
<div x-data="{ open: false, selected: 'Select...' }">
<button @click="open = !open">
<span x-text="selected"></span>
</button>
<div x-show="open" @click.outside="open = false">
<div @click="selected = 'Option 1'; open = false">Option 1</div>
</div>
</div>Form Validation Pattern
<form x-data="{
email: '',
errors: {},
validate() {
this.errors = {};
if (!this.email.includes('@')) {
this.errors.email = 'Invalid email';
}
}
}" @submit.prevent="validate()">
<input x-model="email" @blur="validate()">
<p x-show="errors.email" x-text="errors.email"></p>
</form>