Components / Inputs
Prefix and suffix
Fixed text before or after a field's value, such as https:// or a unit.
Functions: cui_input
Usage
Every text field takes muted text before and after the value:
static char site[128], weight[16];
cui_input(ui, "site", site, sizeof site, .prefix = "https://");
cui_input(ui, "weight", weight, sizeof weight, .suffix = "kg");prefix and suffix are options of cui_input, cui_search and cui_textarea, drawn inside the field's border in the muted color. They are not part of the value: your buffer holds only what the user types, so add the prefix yourself when you use the text, for example to build the URL. The call returns the same flags as any text field. Both strings are read every frame, so they can change with the unit the user picked. A prefix comes before the field's icon. The typing area gets the room that is left, so keep both short. cui_number has its own suffix, and the money field uses the pair for its symbol and currency code.
Keyboard
- The field edits like any text field, with Left, Right, Home and End moving the caret.
Options of cui_input
| Option | Type | Default | Description |
|---|---|---|---|
.label | const char * | label above the field | |
.placeholder | const char * | Muted text shown while the field is empty. | |
.icon | const char * | leading icon | |
.hint | const char * | helper text below | |
.error | const char * | error text below (red) | |
.password | bool | shows dots instead of the text, with an eye button that reveals it | |
.disabled | bool | Greyed out, and takes no input. | |
.clearable | bool | x button when not empty | |
.autofocus | bool | Takes the keyboard focus when it first appears. | |
.read_only | bool | Shows the value but does not let it be edited. | |
.size | cui_control_size | One of CUI_SIZE_MD, CUI_SIZE_SM or CUI_SIZE_LG. | |
.width | cui_size | Width: CUI_FILL, CUI_FIT, CUI_PX(n) or CUI_PCT(n); unset uses the component's own. | |
.height | float | textarea: height in points; negative fills the space | |
.prefix | const char * | muted text before the value, e.g. "$" or "https://" | |
.suffix | const char * | muted text after the value, e.g. "USD" or "kg" |
Related
- Text field: A single-line field that edits text in a buffer you own, with a label, an icon, a hint and an error. The search field is a variant.
- Money field: A field for an amount of money, with a currency symbol and grouped digits.
- Text area: A multi-line text field that wraps and scrolls.
- Number field: A field for a number in a range, typed or stepped with its buttons and the arrow keys.