Repository navigation
[Feature request] readOnly state for Input, Textarea, and Number/Password/Date inputs (distinct from disabled) #202
MontseTelefonica
started this conversation in
Ideas
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Currently, these components only document Default, Disabled, and Invalid states. There is no read-only state, and no
readOnlyprop is mentioned in any of their FAQs.Requested change:
readOnlyboolean prop, distinct fromdisabled, to the components built directly on the native<input>/<textarea>element: Input, Textarea, Number input, Password input, and the text field portion of Date input.readonlyattribute, and React Aria'suseTextFieldalready supportsisReadOnlyat the primitive level. This should be a low-effort, consistent change across components that already share the same underlying primitive — not a new interaction pattern.readonlyattribute in HTML, so a read-only state there would need a custom ARIA pattern and extra interaction-blocking logic rather than reusing an existing primitive. Leaving those out keeps this request scoped to a small, mechanical change.Why this should not just reuse the disabled state (accessibility rationale):
disabledremoves the field from the tab sequence entirely. Keyboard-only and screen reader users tabbing through the form will skip it and may never encounter the value. A read-only field stays focusable, so its label and value are announced in the natural tab order.disabledinstead implies "inactive/not applicable," which misrepresents a valid, current value. This maps to WCAG 4.1.2 (Name, Role, Value): the exposed state should match the field's actual condition.disabledfields from form submission by default. If the value needs to travel with the rest of the form data,disabledsilently drops it, whilereadOnlykeeps it in the submitted payload.disabledfields are not selectable via keyboard in most browsers;readOnlyfields are.Use case (illustrative): A profile settings form where one field's value is managed by an external identity provider (SSO), with helper text explaining the value must be changed elsewhere. The field must still display its current value, remain focusable, and be understood by assistive technology as "read only," not "disabled."
All reactions