Chakra-UI

I♥️Components

Editable

|

Chakra Docs

|

⦾ Chakra UI's Editable component serves a unique purpose - to facilitate the inline renaming of text. Under normal circumstances, it manifests as regular UI text. However, on user interaction, specifically when a click or focus is initiated, it transforms into a text input field. The purpose of the Editable component is to streamline the user experience by providing a smooth, dynamic interface that does not interrupt the flow of content.

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:

Examples

Basic Usage

⦾ One of the fundamental characteristics of the Editable Editable is that it inherits all font styling from the root Editable container. This design choice ensures a seamless transition between the edit view and the read view. In this example, the default value of 'Goodnight, moon.' will be displayed in read-only mode. However, clicking on the text will transform it into an input field where the text can be modified.
Goodnight, Moon.

Code

Textarea

⦾ The EditableTextarea component is employed when multiline text input needs to be editable. The usage is very similar to the single line EditableInput, but allows for handling more extensive content.
Hello, Universe!

Code

Custom Inputs and Controls

⦾ Chakra UI Editable is quite flexible and customizable. In certain situations, you might want to use custom controls for toggling between edit and read modes. The component's internal state can be accessed using the render prop pattern, enabling customization of the EditableInput with a custom Input component. In this case, the 'Hello, Multiverse!' text can be edited by clicking the custom edit icon, and changes can be saved or cancelled with the custom save and cancel icons.
Hello, Multiverse!

Code

Dark Themed Editable

⦾ In this example, we're wrapping the Editable component with a Boxcomponent. The Box component has a dark background color, and we're overriding the text color of the Editable to be white. This creates a dark themed editable input.

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.

Dark Themed Text

Code

Comment Card Editable.

⦾ This example will have a pre-filled comment, and the user can edit the comment and save their changes. We'll also add some attractive buttons for better user interaction.

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.

This comment adds value to the conversation!

Code

Did you know?

Creative Idea No. 1

Editable Color Picker: You could use the Editable component as an input to create quality interactive experiences such as an editable color picker, allowing users to see a color preview and edit the color using a hex code. For design applications or tools where color management is crucial, an editable color picker can serve as a handy utility. The color box presents a visual preview of the selected color, and the hex code can be edited to change the color.
#44EAFA

Code

Creative Idea No. 2

Inline Editing of Table Cells: One interesting use case for Editable component is the inline editing of table cells. This can be incredibly useful for users as it can make the editing process much more user-friendly and convenient.
NameAge
Jasper Jenkins
77

Code

Creative Idea No. 3

Editable Dates: You can create an editable date component, allowing users to view and edit dates in a user-friendly manner. Dates are often viewed in a friendly format, such as "June 2, 2023", but are more easily edited in a standardized format, like "2023-06-02". The Editable component can show the date in a friendly format, and switch to a date input for editing. Here is how you can do it.
2023-09-15

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.