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({
  className: 'editable',
  slots: editableAnatomy.keys(),
  base: {
    root: {
      display: 'flex',
      flexDirection: 'column',
      gap: '1.5',
      width: '100%',
    },
    control: {
      display: 'flex',
      gap: '2',
    },
  },
})

Usage

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

<Editable.Root placeholder="Enter text..." activationMode="dblclick">
  <Editable.Area>
    <Editable.Input />
    <Editable.Preview />
  </Editable.Area>
</Editable.Root>

Props

Root

Prop	Default	Type
`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.