InlineEdit #

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 #

TextArea #

With InputPicker and no controls #

With TagPicker #

With DatePicker #

With Slider #

Custom Input #

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

Disabled #

User Profile #

Size #

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.