The Chakra UI Editable suite comprises four key components:
Editable: This is the wrapper component that provides context value.
EditableInput: This represents the edit view of the component and becomes visible when a click or focus is given to the text.
EditableTextarea: This component is used when multiline text input is needed in an editable context.
EditablePreview: This is the read-only view of the component.
These components can be imported as follows:
Custom Inputs and Controls
Dark Themed Editable
Remember that the editable's styling is determined by parent components. In this case, the parent component is the Box component, which has a dark background color and so forth. This way, we can very easily create a dark themed editable input.
Comment Card Editable.
In this example, we've created a comment card component. This component contains an Editable component that defaults to a pre-filled comment. If the user wants to edit this comment, they click on the "Edit" button which transforms the text into an editable input field. Once they've made their changes, they can choose to save the changes by clicking on the "Save" button or cancel the changes by clicking on the "Cancel" button. The buttons have been styled with different color schemes for a sleeker look. This provides a stylized, comment-like editable field with a tooltip prompting the user to click to edit. When the comment is in edit mode, a button group appears offering save and cancel options.
Did you know?
Creative Idea No. 1
Creative Idea No. 2
Creative Idea No. 3