Editable

An inline editable text component that allows users to edit text in place.

Interactive-mode

Divergence from Blok

EditableRootProvider accepts explicit Blazor parameters instead of a pre-built hook result. Blok's React implementation exports a useEditable hook and an EditableRootProvider that takes the hook's return value as its value prop. Blazor has no hook pattern; EditableRootProvider instead accepts IsEditing / @bind-IsEditing and Value / @bind-Value parameters, letting the parent component manage all state explicitly. The useEditable and useEditableContext React hooks have no Blazor equivalent and are omitted.

Examples

Input

Click to edit this text

Textarea

This is a longer piece of text that spans multiple lines. Click to edit it and add more content

With controls

Click the Edit button or the text to start

Double-click to edit

Double-click to edit this text

Disabled

Cannot edit this

Start in edit view

Sizes

Small text

Medium text

Large text

Controlled (EditableRootProvider)

Externally controlled value

Current value: Externally controlled value | Editing: False

API

The element family below can be composed together. Click an element to jump to its properties.

Element	Purpose
Editable	Root container that manages edit state, value, and cascades an `EditableContext` to all child components.
EditableRootProvider	Fully externally-controlled variant of `Editable`. Use when the parent needs to own and observe all edit state.
EditablePreview	Read-only display of the current value. Clicking (or double-clicking) it starts edit mode, depending on `ActivationMode`.
EditableInput	Single-line text input shown when editing. Submits on Enter, cancels on Escape, and auto-focuses when edit mode starts.
EditableTextarea	Multi-line textarea shown when editing. Ctrl/Cmd+Enter submits, Escape cancels, plain Enter adds a newline.
EditableControl	Flex row wrapper for action buttons (`EditableEditTrigger`, `EditableSubmitTrigger`, `EditableCancelTrigger`).
EditableEditTrigger	Ghost button that starts edit mode. Hidden while editing.
EditableCancelTrigger	Ghost button that cancels editing and restores the previous value. Visible only while editing.
EditableSubmitTrigger	Primary button that commits the edited value. Visible only while editing.

Editable

Root container that manages edit state, value, and cascades an EditableContext to all child components.

Property	Type	Description
DefaultValue	string	Initial value in uncontrolled mode. Default: `""`.
Value	string?	Controlled value. When non-null, the component is in controlled mode — pair with `ValueChanged` or `@bind-Value`.
ValueChanged	EventCallback<string>	Fires whenever the value changes. Pair with `Value` for two-way binding.
Placeholder	string	Text shown in `EditablePreview` when value is empty. Default: `"Click to edit..."`.
IsDisabled	bool	Prevents editing. Default: `false`.
IsPreviewFocusable	bool	Whether `EditablePreview` is keyboard-focusable and clickable. Default: `true`.
SubmitOnBlur	bool	Submits the value when the input loses focus. Default: `true`.
StartWithEditView	bool	Starts the component in edit mode. Default: `false`.
SelectAllOnFocus	bool	Selects all text when the input gains focus. Default: `true`.
ActivationMode	EditableActivationMode	Whether a single click or double-click activates edit mode. Default: `EditableActivationMode.Click`.
Size	EditableSize	Applies a text-size class to the root. Default: `EditableSize.Md`. Other values: `Sm`, `Lg`.
OnSubmit	EventCallback<string>	Fires when the user submits the edited value (Enter, blur, or `EditableSubmitTrigger`).
OnCancel	EventCallback<string>	Fires when the user cancels editing (Escape or `EditableCancelTrigger`). Receives the previous value.
OnEdit	EventCallback	Fires when the component enters edit mode.
ClassName	string?	Extra CSS classes appended to the root `<div>`.
ChildContent	RenderFragment?	Should contain `EditablePreview`, an `EditableInput` or `EditableTextarea`, and optionally an `EditableControl`.
AdditionalAttributes	Dictionary<string, object>?	Captured unmatched attributes forwarded to the root `<div>`.

EditableRootProvider

Fully externally-controlled variant of Editable. Use when the parent needs to own and observe all edit state.

Property	Type	Description
IsEditing	bool	Whether the component is currently in edit mode. Supports two-way binding via `@bind-IsEditing`.
IsEditingChanged	EventCallback<bool>	Fires when the editing state should change. Pair with `IsEditing` for two-way binding.
Value	string	The current text value. Supports two-way binding via `@bind-Value`.
ValueChanged	EventCallback<string>	Fires when the value changes. Pair with `Value` for two-way binding.
Placeholder	string	Placeholder text when value is empty. Default: `"Click to edit..."`.
IsDisabled	bool	Prevents editing. Default: `false`.
IsPreviewFocusable	bool	Whether `EditablePreview` is clickable and keyboard-focusable. Default: `true`.
SubmitOnBlur	bool	Submits on blur. Default: `true`.
SelectAllOnFocus	bool	Selects all text on focus. Default: `true`.
ActivationMode	EditableActivationMode	Click or double-click activation. Default: `EditableActivationMode.Click`.
Size	EditableSize	Text-size variant. Default: `EditableSize.Md`.
OnSubmit	EventCallback<string>	Fires when submit is requested.
OnCancel	EventCallback<string>	Fires when cancel is requested. Receives the current value.
OnEdit	EventCallback	Fires when edit mode is requested.
ClassName	string?	Extra CSS classes.
ChildContent	RenderFragment?	Body content — `EditablePreview`, input/textarea, optional controls.
AdditionalAttributes	Dictionary<string, object>?	Forwarded to the root `<div>`.

EditablePreview

Read-only display of the current value. Clicking (or double-clicking) it starts edit mode, depending on ActivationMode.

Property	Type	Required	Description
ClassName	string?		Extra CSS classes appended to the preview `<span>`.
AdditionalAttributes	Dictionary<string, object>?		Forwarded to the `<span>` element.

EditableInput

Single-line text input shown when editing. Submits on Enter, cancels on Escape, and auto-focuses when edit mode starts.

Property	Type	Required	Description
ClassName	string?		Extra CSS classes appended to the `<input>` element.
AdditionalAttributes	Dictionary<string, object>?		Forwarded to the native `<input>`.

EditableTextarea

Multi-line textarea shown when editing. Ctrl/Cmd+Enter submits, Escape cancels, plain Enter adds a newline.

Property	Type	Required	Description
ClassName	string?		Extra CSS classes appended to the `<textarea>` element.
AdditionalAttributes	Dictionary<string, object>?		Forwarded to the native `<textarea>`.

EditableControl

Flex row wrapper for action buttons (EditableEditTrigger, EditableSubmitTrigger, EditableCancelTrigger).

Property	Type	Description
ClassName	string?	Extra CSS classes appended to the `<div>`.
ChildContent	RenderFragment?	Action triggers.
AdditionalAttributes	Dictionary<string, object>?	Forwarded to the `<div>`.

EditableEditTrigger

Ghost button that starts edit mode. Hidden while editing.

Property	Type	Description
ClassName	string?	Extra CSS classes.
ChildContent	RenderFragment?	Button label. Default: `"Edit"`.
AdditionalAttributes	Dictionary<string, object>?	Forwarded to the `Button`.

EditableCancelTrigger

Ghost button that cancels editing and restores the previous value. Visible only while editing.

Property	Type	Description
ClassName	string?	Extra CSS classes.
ChildContent	RenderFragment?	Button label. Default: `"Cancel"`.
AdditionalAttributes	Dictionary<string, object>?	Forwarded to the `Button`.

EditableSubmitTrigger

Primary button that commits the edited value. Visible only while editing.

Property	Type	Description
ClassName	string?	Extra CSS classes.
ChildContent	RenderFragment?	Button label. Default: `"Save"`.
AdditionalAttributes	Dictionary<string, object>?	Forwarded to the `Button`.