Atlaskit editable

This example features a tweaked UI, a hover color with dark mode support, and a tooltip. As you can see, we can change the input by setting the as prop. This design is inspired by the Atlassian inline edit component. Read more about the editable here.

Here are the imports required:

import { EditablePreview, Box, useColorModeValue, IconButton, Input, useDisclosure, useEditableControls, ButtonGroup, SlideFade, Editable, Tooltip, EditableInput } from "@chakra-ui/react";
import { CheckIcon, CloseIcon } from "@chakra-ui/icons";