The Figma spec sheet for the TextInput component includes a read-only state, but this is not yet implemented. Instead of implementing this as a prop, we should just accept the native attribute.
This should be pretty straightforward style-wise, but we should ensure that the readonly state interacts properly with other states. For example:
- If a TextInput is both readonly and disabled, the disabled styles should take precedent
- Should a readonly TextInput be focusable? If not, then it should always look the same regardless of focus/hover/active state. If so, we will need to determine exactly how it should look in these states.
Getting this right may require some consideration during development and possibly a conversation with the design team.
Acceptance criteria
- TextInput properly responds to the readonly attribute: when readonly is applied, the user cannot change the value and styles match the readonly state as shown on the spec sheet
- The read-only behavior is documented on the docs site as a boolean prop of the configurable demo (we also include the placeholder attribute here)
In the future, a separate demo similar to the disabled demo could be added.