InlineEdit

StorybookSupported from version 5.54.0

An inline edit displays a custom input component that switches between reading and editing on the same page.

Import

import { InlineEdit } from 'rsuite';

Examples

Basic

Rendering...

TextArea

Rendering...

With InputPicker and no controls

Rendering...

With TagPicker

Rendering...

With DatePicker

Rendering...

With Slider

Rendering...

Custom Input

InlineEdit can wrap any data input component, including custom input components.

Rendering...

Disabled

Rendering...

User Profile

Rendering...

Size

Rendering...

Props

<InlineEdit>

Property Type (Default) Description
as elementType ('div') A custom element type.
disabled boolean If true, the InlineEdit will be disabled.
defaultValue any The initial value of the InlineEdit when it is not controlled.
value any The value of the InlineEdit.
showControls boolean (true) show the control buttons when editing.
placeholder string The placeholder of the InlineEdit.
size 'lg' | 'md' | 'sm' | 'xs' The size of the InlineEdit.
stateOnBlur 'save' | 'cancel' The state of the InlineEdit when it is blurred.
onChange (value: any, event: ChangeEvent) => void The callback function that is called when the value of the InlineEdit is changed.
onCancel (event?: SyntheticEvent) => void The callback function that is called when the InlineEdit is canceled.
onSave (event?: SyntheticEvent) => void The callback function that is called when the InlineEdit is saved.
onEdit (event: SyntheticEvent) => void The callback function that is called when the InlineEdit is clicked.
children ReactNode | (props: ChildrenProps, ref: Ref) => ReactNode The render function of the InlineEdit.
Vercel banner