form

Custom Date Picker

Lightweight calendar dropdown for date selection.

date picker calendar input | Gemini 3.1 Pro

Prompt

# Role
You are a Senior Frontend Engineer specializing in UX, form components, and input validation patterns.

# Objective
Create a custom, lightweight date picker component that renders a calendar dropdown, supports month navigation, and populates a text input on date selection — all without external dependencies.

# Instructions
1. Build a text input field that triggers the calendar dropdown:
   - Display selected date in the input (format: YYYY-MM-DD)
   - Show a calendar icon inside the input as a visual affordance
   - Open dropdown on input focus or icon click
   - Close dropdown on outside click or Escape key
2. Render the calendar grid as a month view:
   - 7-column grid layout (Sun–Sat) using CSS Grid
   - Display day-of-week headers (S, M, T, W, T, F, S)
   - Fill in dates for the current month; gray out overflow days from adjacent months
3. Add month navigation:
   - Previous (←) and Next (→) arrow buttons flanking the month/year title
   - Smooth transition between months without page reload
4. Implement date highlighting:
   - Today's date: accent-colored border or underline
   - Selected date: filled circle with contrasting text
   - Hover state: subtle background highlight
5. On date click:
   - Populate the text input with the selected date
   - Close the dropdown
   - Dispatch a `change` event on the input

# Constraints
- Vanilla HTML, CSS, and JavaScript only — no libraries or frameworks
- Use CSS Grid with `grid-template-columns: repeat(7, 1fr)` for the calendar layout
- Must be keyboard-accessible: arrow keys to navigate days, Enter to select
- Dark mode compatible with subtle borders and muted colors
- Do not use the native `<input type="date">` — this is a custom replacement

# Output Format
- Single HTML file with embedded `<style>` and `<script>` blocks
- Calendar component wrapped in a reusable container
- Include sample usage demonstrating the component in context

Notes

Prompt

Role

You are a Senior Frontend Engineer specializing in UX, form components, and input validation patterns.

Objective

Create a custom, lightweight date picker component that renders a calendar dropdown, supports month navigation, and populates a text input on date selection — all without external dependencies.

Instructions

Build a text input field that triggers the calendar dropdown:
- Display selected date in the input (format: YYYY-MM-DD)
- Show a calendar icon inside the input as a visual affordance
- Open dropdown on input focus or icon click
- Close dropdown on outside click or Escape key
Render the calendar grid as a month view:
- 7-column grid layout (Sun–Sat) using CSS Grid
- Display day-of-week headers (S, M, T, W, T, F, S)
- Fill in dates for the current month; gray out overflow days from adjacent months
Add month navigation:
- Previous (←) and Next (→) arrow buttons flanking the month/year title
- Smooth transition between months without page reload
Implement date highlighting:
- Today’s date: accent-colored border or underline
- Selected date: filled circle with contrasting text
- Hover state: subtle background highlight
On date click:
- Populate the text input with the selected date
- Close the dropdown
- Dispatch a change event on the input

Constraints

Vanilla HTML, CSS, and JavaScript only — no libraries or frameworks
Use CSS Grid with grid-template-columns: repeat(7, 1fr) for the calendar layout
Must be keyboard-accessible: arrow keys to navigate days, Enter to select
Dark mode compatible with subtle borders and muted colors
Do not use the native <input type="date"> — this is a custom replacement

Output Format

Single HTML file with embedded <style> and <script> blocks
Calendar component wrapped in a reusable container
Include sample usage demonstrating the component in context

Notes

Use CSS Grid for the 7-column calendar layout — it’s the cleanest approach.
Handle month boundary transitions (e.g., January ← → December across years).
Consider adding aria-label on each day cell for screen reader support.

Related Prompts

File Upload Dropzone

Drag-and-drop file upload area with preview and validation.

# Role You are a Senior Frontend Developer and UX Engineer specializing in file handling interfaces, drag-and-drop interactions, and form component design. # Objective Build a drag-and-drop file upload dropzone with visual feedback states, file previews, validation, and a file list — styled for dark mode with smooth micro-interactions. # Instructions 1. Create the dropzone area: - Large dashed-border rectangle as the drop target - Upload icon (cloud + arrow SVG) centered with instructional text - Text: "Drag & drop files here" with a secondary "or click to browse" link - Hidden `<input type="file" multiple>` triggered by clicking the dropzone 2. Implement drag-and-drop visual states: - **Default**: dashed border in muted color - **Drag over**: border color changes to accent, background lightens, icon scales up slightly - **Uploading**: pulsing animation on the border - **Error**: red border with error message - Smooth transitions between all states (200ms ease) 3. Build the file preview list (below the dropzone): - Each file shows: file type icon, file name (truncated), file size (human-readable), and a remove button (×) - Image files show a thumbnail preview (use `FileReader` + `URL.createObjectURL`) - Progress bar per file (simulated with CSS animation) 4. Add validation: - Max file size: 10MB per file — show inline error for oversized files - Accepted types: images and PDFs only (`.jpg`, `.png`, `.gif`, `.pdf`) - Max 5 files at once — reject additional files with a warning 5. Style in dark mode: - Dark card background with subtle border - Accent color for active/success states, red for errors - Consistent spacing and rounded corners # Constraints - Vanilla JavaScript — no external libraries - Use `dragenter`, `dragover`, `dragleave`, `drop` events with proper `preventDefault()` - Semantic HTML with `aria-label` on the dropzone - File size display in human-readable format (KB, MB) - Must work without JavaScript for the basic `<input type="file">` fallback - Responsive: full-width on mobile, max-width 600px on desktop # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include realistic placeholder states and sample file entries - Well-commented code with clear separation: dropzone UI, drag events, file handling, validation

upload drag-drop file +1

Claude 4.6 Sonnet

Multi-Step Form Wizard

Progressive form with step indicator and validation.

# Role You are a Senior Frontend Engineer specializing in UX, form design, and client-side validation patterns. # Objective Build a multi-step form wizard with a visual step indicator, field validation, a review step, and smooth slide transitions between each stage. # Instructions 1. Create a step indicator bar at the top: - 3 numbered circles connected by horizontal lines - Active step: filled accent color with white number - Completed step: green with checkmark icon - Upcoming step: muted/gray outline - Lines between steps fill with color as steps complete 2. Build 3 form steps: - **Step 1 — Personal Info**: Full name (required), email (required, validated), phone (optional) - **Step 2 — Preferences**: Preferred contact method (radio buttons), newsletter opt-in (checkbox), timezone (select dropdown) - **Step 3 — Review & Submit**: Display all entered data in a read-only summary, edit button per section to jump back 3. Add navigation controls: - "Previous" button (hidden on Step 1) - "Next" button (disabled until required fields are valid) - "Submit" button on the final review step 4. Implement validation: - Validate required fields before allowing progression to the next step - Show inline error messages below invalid fields - Highlight invalid fields with red border 5. Add slide transitions: - Use `transform: translateX()` with transition for horizontal sliding between steps - Current step slides out, next step slides in # Constraints - Vanilla HTML, CSS, and JavaScript only — no frameworks or libraries - Client-side validation only (HTML5 + JavaScript) - Disable the "Next" button until all required fields on the current step pass validation - Form must be keyboard-navigable: Tab through fields, Enter to advance - Dark mode compatible styling - Single-page form — no actual page navigation # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Use `translateX()` for slide transitions between steps - Include realistic placeholder content and sample data - Well-commented code with clear separation of each step

form wizard steps +1

GPT 5.3 Ultra

Onboarding Wizard

Multi-step onboarding flow with progress indicator and illustrations.

# Role You are a Senior Frontend Developer and Product Design Engineer specializing in user onboarding flows, progressive disclosure, and first-run experience design. # Objective Build a multi-step onboarding wizard with a visual progress indicator, step-specific content panels, navigation controls, and smooth transitions — designed to guide new users through initial setup. # Instructions 1. Create the wizard container: - Centered card on a dark background (max-width: 640px) - Subtle shadow and rounded corners for a floating card feel - Fixed height with content area that transitions between steps 2. Build the progress indicator (top of the card): - Horizontal step bar with numbered circles connected by lines - States for each step: completed (filled accent), active (outlined accent with pulse), upcoming (muted) - Step labels beneath each circle (e.g., "Profile", "Workspace", "Integrations", "Done") - 4 total steps 3. Design each step's content: - **Step 1 — Profile**: name input, role dropdown, avatar upload placeholder - **Step 2 — Workspace**: workspace name input, team size radio buttons (Solo, Small Team, Organization) - **Step 3 — Integrations**: checklist of integration options with toggle switches (GitHub, Slack, Jira, Figma) - **Step 4 — Done**: success illustration (CSS checkmark animation), welcome message, "Go to Dashboard" CTA 4. Add navigation controls (bottom of the card): - "Back" button (hidden on Step 1) - "Continue" button (becomes "Finish" on last step) - Step counter text: "Step 2 of 4" 5. Implement transitions: - Slide-left animation when advancing, slide-right when going back - Progress bar fills smoothly between steps # Constraints - Vanilla JavaScript for step navigation and state management - CSS transitions for slide animations — no animation libraries - Form inputs must be properly labeled with `<label>` elements - Keyboard-accessible: Tab through form fields, Enter to advance - Maintain form state when navigating back to previous steps - Dark mode only with consistent input styling - Responsive: full-width card on mobile with stacked layout # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include realistic placeholder content (SaaS or developer tool theme) - Well-commented code with sections: progress bar, step content, navigation logic, transitions

onboarding wizard steps +1

Claude 4.6 Opus