Editable

A component that allows users to edit text in place.

Demo

React

Activate modeFocusClickDouble clickNone

Submit modeNoneBlurEnterBoth

Multiline

Disabled

Hello, world!

Mode:viewing

Value:"Hello, world!"Reset

Vue

Activate modeFocusClickDouble clickNone

Submit modeNoneBlurEnterBoth

Multiline

Disabled

Hello, world!

Mode: viewing

Value: "Hello, world!" Reset

Example

React

import { useState } from 'react';
// Import component
import { Editable } from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/editable.css';

const [value, setValue] = useState('Hello, world!');

return (
  <Editable
    value={value}
    onChange={setValue}
  />
);

Vue

<script setup lang="ts">
import { ref } from 'vue';
// Import component
import { Editable } from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/editable.css';

const value = ref('Hello, world!');
</script>

<template>
  <Editable v-model="value" />
</template>

Props

React

Name	Type	Default	Description
value	string	—	The value of the editable field (controlled)
defaultValue	string	—	The default value of the editable field (uncontrolled)
placeholder	string	—	The placeholder of the editable field
activateMode	ActivationMode	click	The activation mode for the preview element
submitMode	SubmitMode	blur	The action that triggers submit in the edit mode
multiline	boolean	false	Whether the editable field is multiline (textarea)
disabled	boolean	false	Whether the editable field is disabled
editTrigger	ReactNode	—	The trigger component to edit the value
saveTrigger	ReactNode	—	The trigger component to save the value
cancelTrigger	ReactNode	—	The trigger component to cancel the edit

Vue

Name	Type	Default	Description
model-value	string	—	The value of the password field (controlled) 1
default-value	string	—	The default value of the editable field (uncontrolled)
placeholder	string	—	The placeholder of the editable field
activate-mode	ActivationMode	click	The activation mode for the preview element
submit-mode	SubmitMode	blur	The action that triggers submit in the edit mode
multiline	boolean	false	Whether the editable field is multiline (textarea)
disabled	boolean	false	Whether the editable field is disabled

1. Can be used with the v-model directive for two-way binding.

Slots

Name	Description
edit-trigger	The trigger component to edit the value
save-trigger	The trigger component to save the value
cancel-trigger	The trigger component to cancel the edit

Events

React

Name	Type	Description
onValueChange	(value: string) => void	Callback fired when the value change is committed
onEditChange	(edit: boolean) => void	Callback fired when the edit state changes

Vue

Name	Payload	Description
update:model-value	string	Event emitted when the value change is committed
edit-change	boolean	Event emitted when the edit state changes

Types

ActivationMode

type ActivationMode = 'focus' | 'click' | 'dblclick' | 'none'

Value	Description
focus	Enter edit mode when the preview is focused
click	Enter edit mode when the preview is double-clicked
dblclick	Enter edit mode when the preview is clicked
none	Edit can be triggered programmatically only

SubmitMode

type SubmitMode = 'none' | 'blur' | 'enter' | 'both'

Value	Description
none	No action will trigger submit. You need to use the submit button
blur	Trigger submit when the editable is blurred
enter	Trigger submit when the enter key is pressed
both	Pressing Enter and blurring the input will trigger submit