When Select.Root is rendered with variant="secondary" and the field is invalid (isInvalid), the trigger background renders with the primary (white/--color-field-focus) background instead of the expected secondary (grey/--default) background.
In @heroui/styles, the invalid state rule nested inside .select__trigger compiles to specificity 0,3,0:
/* specificity 0,3,0 */
.select[data-invalid="true"] .select__trigger,
.select[aria-invalid="true"] .select__trigger {
background-color: var(--color-field-focus); /* primary/white */
}
The secondary variant rule only has specificity 0,2,0:
/* specificity 0,2,0 */
.select--secondary .select__trigger {
background-color: var(--select-trigger-bg); /* --default = grey */
}
Since 0,3,0 > 0,2,0, the invalid state always overrides the secondary background β the secondary invalid override is missing.

Please authenticate to join the conversation.
In Review
Issues
2 days ago

NicolaCastellani
Get notified by email when there are changes.
In Review
Issues
2 days ago

NicolaCastellani
Get notified by email when there are changes.