Select With Colored Border And Ring - With colored border and ring

Pro

Select with a custom blue border and focus ring on the trigger.

Shadcn Select With Colored Border And Ring component

Component data

ID: select/select-with-colored-border-and-ring
Access: pro
Created: May 23, 2026
Type: example
Libraries: Radix UI, Base UI, React Aria

Select With Colored Border And Ring component design & features

This example applies custom border and focus ring classes to SelectTrigger to preview a fixed accent color. Options list UI elements such as Buttons and Links, not color names, so the blue ring on the trigger is not confused with the selected value.

Use this pattern in theme or branding settings where the trigger itself shows the accent being configured.