Editable
Displays an input field used for editing a single line of text, rendering as static text on load. It transforms into a text input field when the edit interaction is triggered.
Source code
Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Installation
npx ui-thing@latest add editable
Usage
The Editable component is one that will be used differently in different parts of your app.
Since we already have styled buttons and inputs, it kinda makes no sense to force a specific style on the Editable component when we can just use the asChild prop to pass in the children we want to use.
Application
Below is the information submitted. Click on the values to edit them.
- Full name
- John Doe
- janedoe@testmail.com
- Phone
- 123-456-7890
- Address
- 1234 Elm St
- City
- Springfield
- State
- IL
- Zip
- 62701