Skip to contentWolf-Rayet

Inline edit

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

#Default

Select the value to edit it. Enter confirms, Escape cancels.

import { InlineEdit } from '@wolf-rayet/react';

<InlineEdit label="Queue name" defaultValue="Billing" />

#Empty

Show a placeholder when there is no value yet.

import { InlineEdit } from '@wolf-rayet/react';

<InlineEdit label="Escalation note" defaultValue="" />