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
21 days ago

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

NicolaCastellani
Get notified by email when there are changes.