Blenra
Optimized for: Gemini / ChatGPT / Claude

Advanced AI Prompt for Custom Focus Ring Logic in Radix UI Select

Use this engineered prompt to drastically optimize your workflow and output.

Required Variables

  • ✦[BRAND_COLORS]
  • ✦[FOCUS_INDICATOR_TYPE]
  • ✦[KEYBOARD_ONLY_LOGIC]
radix-select-custom-focus-rings.txt
Customize the Radix UI Select component to use a bespoke focus strategy. Using [BRAND_COLORS], design a [FOCUS_INDICATOR_TYPE] that meets WCAG 2.1 non-text contrast requirements. Implement [KEYBOARD_ONLY_LOGIC] where focus rings are only visible when navigating via keyboard (using :focus-visible polyfills or Radix's internal state). Detail how to apply these styles to both the Trigger and the individual SelectItems. Ensure the focus ring doesn't get clipped by 'overflow: hidden' on parent containers.

Example Output

"The AI generates a CSS-in-JS solution that uses the data-highlighted attribute from Radix to apply custom brand-aligned focus states without breaking accessibility."