When I passed isInvalid={true} to a <Field /> component I expected the form element to have aria-invalid set to true and the label to have data-invalid set to true as described in the documentation: https://saas-ui.dev/docs/components/forms/field/props#props.
Instead, nothing seemed to happen.
The properties are handled correctly when the input becomes invalid by violating a validation rule.
See that data-invalid/aria-invalid attributes are not set on the elements rendered using the Field component. Compare to the raw Chakra <Input /> element which does correctly set the attribute.
linear[bot]
commented
5 months ago
Description
When I passed
isInvalid={true}to a<Field />component I expected the form element to havearia-invalidset to true and the label to havedata-invalidset to true as described in the documentation: https://saas-ui.dev/docs/components/forms/field/props#props.Instead, nothing seemed to happen.
The properties are handled correctly when the input becomes invalid by violating a validation rule.
Link to Reproduction
https://codesandbox.io/p/sandbox/saas-field-isinvalid-9md4t9?file=%2Fsrc%2Findex.tsx%3A18%2C27
Steps to reproduce
<Input />element which does correctly set the attribute.Saas UI Version
2.8.1
Chakra UI Version
2.8.2
Browser
Firefox 124.0.2 (64-bit)
Operating System
Additional Information
No response