Components / Inputs
Inline edit
Text that turns into a field when clicked, for renaming things in place.
Functions: cui_inline_edit
Usage
static char title[128] = "Q3 roadmap";
if (cui_inline_edit(ui, "title", title, sizeof title, .font = CUI_FONT_DISPLAY, .size = 26) & CUI_CHANGED) rename(title);Looks like text, with a pencil on hover. Click (or Enter when focused) to edit in the same type with the text selected. Enter or clicking away saves, Esc restores the old text.
Returns CUI_CHANGED once, on the frame an edit ends with text that differs from what it started with, and 0 otherwise, including while typing. title is your buffer. The field edits it in place as the user types, so save it only when the call returns CUI_CHANGED. A cancelled edit puts the old text back, of which the library keeps up to 511 bytes. An empty buffer shows placeholder, or "Untitled". Without width the text hugs its content and the field grows as you type.
Keyboard
- Click (or Enter when focused) to edit in the same type with the text selected.
- Enter or clicking away saves, Esc restores the old text.
- Tab focuses the text, and Enter or Space starts the edit. Enter saves and Esc cancels.
Options of cui_inline_edit
| Option | Type | Default | Description |
|---|---|---|---|
.font | cui_font | `CUI_FONT_MEDIUM` | font of the text and of the field, default CUI_FONT_MEDIUM |
.size | float | Size in points; 0 uses the component's own. | |
.placeholder | const char * | Muted text shown while the field is empty. | |
.width | cui_size | Width: CUI_FILL, CUI_FIT, CUI_PX(n) or CUI_PCT(n); unset uses the component's own. |
Related
- Scrub field: A number you change by dragging sideways on it, as in design and 3D tools.
- Password strength: A meter under a password field that scores the password from too short to strong.
- Money field: A field for an amount of money, with a currency symbol and grouped digits.
- One time code: A row of boxes for a verification code, filled by typing or pasting.