Focus State
States & VariantsThe visual appearance of an element when it receives keyboard focus, typically shown as an outline or ring, crucial for accessibility and keyboard navigation.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Focus State coming soon.
How It Works in Apps/Websites
Focus states indicate which element is currently selected for keyboard interaction. When users tab through a page, focused elements display a visible ring (usually 2px solid, often blue or accent color). This enables keyboard navigation and is essential for screen reader users. Never remove focus indicators without providing alternatives.
How AI Interprets This Term
When you say 'focus state', AI expects: a visible outline or ring around an element (input, button, link) typically 2px, offset 2px from element, in accent color (blue) or with visible contrast. Should be clearly distinguishable from default and hover states.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Add a focus ring to a button
Design focus states: use blue ring (#3b82f6), 2px width, 2px offset. For dark backgrounds, use lighter ring. Implement focus-visible so focus ring only shows on keyboard navigation, not mouse click.
Show default state, hover state, and focus state for a button side by side
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •All interactive elements
- •Form inputs
- •Buttons and links
- •Custom interactive components
When NOT to Use
- •Never remove focus states entirely
- •Don't hide for 'aesthetic' reasons