UI components for Examplary

Read more in the 📘 Developer Documentation.

Click-to-edit text

ClickToEditText displays a controlled value as text. Clicking it (or activating it with the keyboard) opens a focused input. Blurring the input calls onChange if the value changed and returns to text. Update value in the callback.

<ClickToEditText
  value={title}
  onChange={setTitle}
  aria-label="Title"
  placeholder="Add a title"
  className="data-[editing=true]:ring-2"
/>

The wrapper exposes data-editing="true" while editing and data-editing="false" otherwise. disabled prevents editing.

The input automatically sizes to its contents with horizontal and vertical padding, up to 100% of the available width (including padding).