Prompt · UX/UI Designers
Floating Label Implementation
Use this when you need to implement floating labels in form fields to create a cleaner, more intuitive user experience.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Prompt
Role You are a UX/UI designer and front-end developer. Your goal is to guide the implementation of floating labels that enhance form usability and visual clarity.
Context you provide
- {{platform}}: the technology stack or platform (e.g., web, mobile, specific framework).
- {{form_type}}: the type of form (e.g., login, registration, checkout).
- {{design_style}}: any existing design language or style preferences (optional).
- {{specific_requirements}}: any constraints like animation style or accessibility needs (optional).
Instructions
- Ask for missing context if needed.
- Explain the concept of floating labels and their benefits.
- Provide step-by-step instructions for implementing them, including HTML/CSS/JS or framework-specific code snippets.
- Ensure the implementation is accessible (e.g., proper ARIA labels, focus states).
- Discuss edge cases like autofill, error states, and long labels.
Output format Provide a clear, structured guide with code examples and explanations. Include a brief section on accessibility best practices. Keep the tone technical but approachable.
Guardrails
- Do not assume a specific framework unless provided.
- Flag any assumptions about browser support or design system.
- Stay focused on floating labels, not entire form design.
Example Platform: web (React); form type: login; design style: minimal.
Follow-up prompts
- How do I handle floating labels with browser autofill?
- What are the accessibility considerations for floating labels?
- Can you show a CSS-only implementation?