Components
Editable

Editable

A component that allows users to edit text in place.

Usage

Double click to edit
import { Button } from '~/components/ui/button'
import * as Editable from '~/components/ui/editable'
import { FormLabel } from '~/components/ui/form-label'

export const Demo = (props: Editable.RootProps) => {
  return (
    <Editable.Root
      placeholder="Your favorite Framework"
      defaultValue="Double click to edit"
      activationMode="dblclick"
      {...props}
    >
      {(state) => (
        <>
          <Editable.Label asChild>
            <FormLabel>Framework</FormLabel>
          </Editable.Label>
          <Editable.Area>
            <Editable.Input />
            <Editable.Preview />
          </Editable.Area>
          <Editable.Control>
            {state.isEditing ? (
              <>
                <Editable.SubmitTrigger asChild>
                  <Button variant="link">Save</Button>
                </Editable.SubmitTrigger>
                <Editable.CancelTrigger asChild>
                  <Button variant="link">Cancel</Button>
                </Editable.CancelTrigger>
              </>
            ) : (
              <Editable.EditTrigger asChild>
                <Button variant="link">Edit</Button>
              </Editable.EditTrigger>
            )}
          </Editable.Control>
        </>
      )}
    </Editable.Root>
  )
}

Installation

1

Add Component

Insert code snippet into your project. Update import paths as needed.

import { Editable } from '@ark-ui/react/editable'
import type { ComponentProps } from 'react'
import { styled } from 'styled-system/jsx'
import { editable } from 'styled-system/recipes'
import { createStyleContext } from '~/lib/create-style-context'

const { withProvider, withContext } = createStyleContext(editable)

export const Root = withProvider(styled(Editable.Root), 'root')
export const Area = withContext(styled(Editable.Area), 'area')
export const CancelTrigger = withContext(styled(Editable.CancelTrigger), 'cancelTrigger')
export const Control = withContext(styled(Editable.Control), 'control')
export const EditTrigger = withContext(styled(Editable.EditTrigger), 'editTrigger')
export const Input = withContext(styled(Editable.Input), 'input')
export const Label = withContext(styled(Editable.Label), 'label')
export const Preview = withContext(styled(Editable.Preview), 'preview')
export const SubmitTrigger = withContext(styled(Editable.SubmitTrigger), 'submitTrigger')

export interface RootProps extends ComponentProps<typeof Root> {}
export interface AreaProps extends ComponentProps<typeof Area> {}
export interface CancelTriggerProps extends ComponentProps<typeof CancelTrigger> {}
export interface ControlProps extends ComponentProps<typeof Control> {}
export interface EditTriggerProps extends ComponentProps<typeof EditTrigger> {}
export interface InputProps extends ComponentProps<typeof Input> {}
export interface LabelProps extends ComponentProps<typeof Label> {}
export interface PreviewProps extends ComponentProps<typeof Preview> {}
export interface SubmitTriggerProps extends ComponentProps<typeof SubmitTrigger> {}
2

Add Recipe

This step is necessary only if you do not use any of the Park UI plugins.

import { editableAnatomy } from '@ark-ui/anatomy'
import { defineSlotRecipe } from '@pandacss/dev'

export const editable = defineSlotRecipe({
  className: 'editable',
  slots: editableAnatomy.keys(),
  base: {
    root: {
      display: 'flex',
      flexDirection: 'column',
      gap: '1.5',
      width: '100%',
    },
    control: {
      display: 'flex',
      gap: '2',
    },
  },
})

On this page