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
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 |
The render function of the InlineEdit. |