Inplace

An unstyled, accessible inline editing component with compound composition.

Build fully custom inline display-to-edit experiences with complete control over layout and styling.

Click to edit

basic-demo

Pre-styled Versions

Choose a pre-styled library to use Inplace with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Compound component API with four sub-components: Root, Display, Content, Close

Usage#

import { Inplace } from 'primereact/inplace';

<Inplace.Root>
    <Inplace.Display></Inplace.Display>
    <Inplace.Content>
        <input />
        <Inplace.Close></Inplace.Close>
    </Inplace.Content>
</Inplace.Root>

Behavior#

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<Inplace.Close as="button">Done</Inplace.Close>

Default elements: Root=div, Display=div, Content=div, Close=div.

Render Function Children#

Content accepts a render function as children, providing access to the component instance.

<Inplace.Content>{(instance) => <span>Active: {String(instance.inplace?.state.active)}</span>}</Inplace.Content>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

/* Select a part to see its CSS selector for custom styling */

API#

InplaceRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InplaceRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InplaceRootInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InplaceRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InplaceRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InplaceRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`active`	`boolean`	`false`
Whether the content is displayed or not.
`defaultActive`	`boolean`	`false`
Whether the content is displayed or not.
`disabled`	`boolean`	`false`
When present, it specifies that the element should be disabled.
`onActiveChange`	`(event: InplaceRootChangeEvent) => void`	—
Callback fired when the Inplace's active state changes.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"inplace"`
`data-part`	`"root"`
`data-active`	Present when active
`data-inactive`	Present when inactive
`data-disabled`	Present when disabled

Defines passthrough(pt) options of Inplace component.

label	type	description
root	InplaceRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.
content	InplaceRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the content's DOM element.
display	InplaceRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the display's DOM element.
close	InplaceRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the close's DOM element.

InplaceDisplay#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InplaceDisplayInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InplaceDisplayInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InplaceDisplayInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InplaceDisplayPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InplaceDisplayInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"inplace"`
`data-part`	`"display"`
`data-active`	Present when active
`data-inactive`	Present when inactive
`data-disabled`	Present when disabled

Defines passthrough(pt) options of InplaceDisplay component.

label	type	description
root	InplaceDisplayPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

InplaceContent#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InplaceContentInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InplaceContentInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InplaceContentInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InplaceContentPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InplaceContentInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of InplaceContent component.

label	type	description
root	InplaceContentPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

InplaceClose#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: InplaceCloseInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: InplaceCloseInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`InplaceCloseInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<InplaceClosePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: InplaceCloseInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"inplace"`
`data-part`	`"close"`
`data-active`	Present when active
`data-inactive`	Present when inactive
`data-disabled`	Present when disabled

Defines passthrough(pt) options of InplaceClose component.

label	type	description
root	InplaceClosePassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

Inplace uses aria-live="polite" by default so screen readers announce content changes. The display element has tabIndex={0} for keyboard focus.

Keyboard Support#

Key	Function
`enter`	Activates the display, showing the content.
`space`	Activates the display, showing the content.