Editable | Park UI

Click to edit

Installation

npx @park-ui/cli@next add editable

Add Component

Copy the code snippet below into you components folder.

'use client'
import { Editable } from '@ark-ui/react/editable'
import type { ComponentProps } from 'react'
import { createStyleContext } from 'styled-system/jsx'
import { editable } from 'styled-system/recipes'

const { withProvider, withContext } = createStyleContext(editable)

export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider(Editable.Root, 'root')
export const RootProvider = withProvider(Editable.RootProvider, 'root')
export const Area = withContext(Editable.Area, 'area')
export const CancelTrigger = withContext(Editable.CancelTrigger, 'cancelTrigger')
export const Control = withContext(Editable.Control, 'control')
export const EditTrigger = withContext(Editable.EditTrigger, 'editTrigger')
export const Input = withContext(Editable.Input, 'input')
export const Label = withContext(Editable.Label, 'label')
export const Preview = withContext(Editable.Preview, 'preview')
export const SubmitTrigger = withContext(Editable.SubmitTrigger, 'submitTrigger')

export { EditableContext as Context } from '@ark-ui/react/editable'

Integrate Recipe

Integrate this recipe in to your Panda config.

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

export const editable = defineSlotRecipe({
  slots: editableAnatomy.keys(),
  className: 'editable',
  base: {
    root: {
      alignItems: 'center',
      display: 'inline-flex',
      gap: '1.5',
      position: 'relative',
      width: 'full',
    },
    preview: {
      alignItems: 'center',
      borderRadius: 'l2',
      cursor: 'default',
      display: 'inline-flex',
      transitionDuration: 'normal',
      transitionProperty: 'common',
      _disabled: {
        userSelect: 'none',
      },
      _hover: {
        bg: 'gray.plain.bg.hover',
      },
    },
    input: {
      borderRadius: 'l2',

      focusRingWidth: '2px',
      focusRing: 'inside',
      transitionDuration: 'normal',
      transitionProperty: 'common',
      width: 'full',
      _focusVisible: {
        outlineOffset: '-1px',
      },
    },
    control: {
      alignItems: 'center',
      display: 'inline-flex',
      gap: '1.5',
    },
  },
  defaultVariants: {
    size: 'md',
  },
  variants: {
    size: {
      '2xs': {
        preview: { textStyle: 'xs', px: '2', py: '0.5' },
        input: { textStyle: 'xs', px: '2', py: '0.5' },
      },
      xs: {
        preview: { textStyle: 'sm', px: '2.5', py: '1.5' },
        input: { textStyle: 'sm', px: '2.5', py: '1.5' },
      },
      sm: {
        preview: { textStyle: 'sm', px: '3', py: '2' },
        input: { textStyle: 'sm', px: '3', py: '2' },
      },
      md: {
        preview: { textStyle: 'sm', px: '3.5', py: '2.5' },
        input: { textStyle: 'sm', px: '3.5', py: '2.5' },
      },
      lg: {
        preview: { textStyle: 'md', px: '4', py: '2.5' },
        input: { textStyle: 'md', px: '4', py: '2.5' },
      },
    },
  },
})

Usage

import { Editable } from '@/components/ui'

<Editable.Root>
  <Editable.Preview />
  <Editable.Input />
</Editable.Root>

Examples

Sizes

Use the size prop to change the size of the editable.

Click to edit

Double Click

Use the activationMode prop to make the content editable when users double click.

Double click to edit

With Controls

Add controls such as "edit", "cancel" and "submit" to Editable for better user experience.

Click to edit

Controlled

Use the value and onValueChange props to control the editable component.

Click to edit

Props

Root

Prop	Default	Type
`size`	`'md'`	`'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg'`
`activationMode`	`\focus\`	`ActivationMode` The activation mode for the preview element. - "focus" - Enter edit mode when the preview is focused - "dblclick" - Enter edit mode when the preview is double-clicked - "click" - Enter edit mode when the preview is clicked - "none" - Edit can be triggered programmatically only
`selectOnFocus`	`true`	`boolean` Whether to select the text in the input when it is focused.
`submitMode`	`\both\`	`SubmitMode` The action that triggers submit in the edit mode: - "enter" - Trigger submit when the enter key is pressed - "blur" - Trigger submit when the editable is blurred - "none" - No action will trigger submit. You need to use the submit button - "both" - Pressing `Enter` and blurring the input will trigger submit
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`autoResize`		`boolean` Whether the editable should auto-resize to fit the content.
`defaultEdit`		`boolean` Whether the editable is in edit mode by default.
`defaultValue`		`string` The initial value of the editable when rendered. Use when you don't need to control the value of the editable.
`disabled`		`boolean` Whether the editable is disabled.
`edit`		`boolean` Whether the editable is in edit mode.
`finalFocusEl`		`() => HTMLElement \| null` The element to receive focus when the editable is closed.
`form`		`string` The associate form of the underlying input.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string area: string label: string preview: string input: string control: string submitTrigger: string cancelTrigger: string editTrigger: string }>` The ids of the elements in the editable. Useful for composition.
`invalid`		`boolean` Whether the input's value is invalid.
`maxLength`		`number` The maximum number of characters allowed in the editable
`name`		`string` The name attribute of the editable component. Used for form submission.
`onEditChange`		`(details: EditChangeDetails) => void` Function to call when the edit mode changes.
`onFocusOutside`		`(event: FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onInteractOutside`		`(event: InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onPointerDownOutside`		`(event: PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`onValueChange`		`(details: ValueChangeDetails) => void` Function to call when the value changes.
`onValueCommit`		`(details: ValueChangeDetails) => void` Function to call when the value is committed.
`onValueRevert`		`(details: ValueChangeDetails) => void` Function to call when the value is reverted.
`placeholder`		`string \| { edit: string; preview: string }` The placeholder text for the editable.
`readOnly`		`boolean` Whether the editable is read-only.
`required`		`boolean` Whether the editable is required.
`translations`		`IntlTranslations` The translations for the editable.
`value`		`string` The controlled value of the editable.