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.