field components should consistently support isReadOnly and isRequired render-props+data-attributes

[stefanprobst]

Provide a general summary of the feature here

this is continuing #5930 (comment)

field components (i.e. those which can be used in a form) should consistently support disabled/invalid/readonly/required props, render-props, and data attributes.

i have tried to list the current support here (although not every case may make sense to support). also, i have not yet created a separate table for data-attributes, but it seems that these match render-props support:

props

RAC	isDisabled	isInvalid	isReadOnly	isRequired
CheckboxGroup	✅	✅	✅	✅
ComboBox	✅	✅	✅	✅
Date/TimeField	✅	✅	✅	✅
NumberField	✅	✅	✅	✅
RadioGroup	✅	✅	✅	✅
SearchField	✅	✅	✅	✅
Select	✅	✅	❌	✅
Slider	✅	❌	❌	❌
Switch	✅	❌	✅	❌
TextField	✅	✅	✅	✅

render props

RAC	isDisabled	isInvalid	isReadOnly	isRequired
CheckboxGroup	✅	✅	✅	✅
ComboBox	✅	✅	❌	✅
Date/TimeField	✅	✅	❌	❌
NumberField	✅	✅	❌	✅
RadioGroup	✅	✅	✅	✅
SearchField	✅	✅	❌	❌
Select	✅	✅	❌	✅
Slider	✅	❌	❌	❌
Switch	✅	❌	✅	❌
TextField	✅	✅	✅	✅

🤔 Expected Behavior?

see above

😯 Current Behavior

see above

💁 Possible Solution

No response

🔦 Context

see above

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Thanks for the issue and the details
Related #6192

[Kegulf]

Ahh, that's annoying 😅
In my opinion if one of the mentioned props is supported the renderProp should also be supported by default.

[Kegulf]

As for the render prop, you can get around it by manually passing a data attribute to the RAC-component, ex:

<ReactAriaNumberField
  name={name}
  isDisabled={disabled}
  isRequired={required}
  isReadOnly={readOnly}
  data-readOnly={readOnly} <-----
  isInvalid={isInvalid}
  minValue={min}
  maxValue={max}
  rest}
>