# Textarea (/examples/widgets/textarea)



Single-line textarea with button matrix [#single-line-textarea-with-button-matrix]

<LvglExampleBrief>
  Feed a one-line textarea from a numeric button matrix.
</LvglExampleBrief>

A textarea is placed at the top in one-line mode and forced into
`LV_STATE_FOCUSED` so the cursor stays visible. A four-row button matrix
holds digits `0..9` plus `LV_SYMBOL_BACKSPACE` and `LV_SYMBOL_NEW_LINE`. Its
`LV_EVENT_VALUE_CHANGED` handler appends the pressed character, deletes on
backspace, or sends `LV_EVENT_READY` to the textarea on new line. The matrix
drops `LV_OBJ_FLAG_CLICK_FOCUSABLE` so focus stays with the textarea.

<LvglExample name="lv_example_textarea_1" path="widgets/textarea/lv_example_textarea_1" />

Password and text fields with keyboard [#password-and-text-fields-with-keyboard]

<LvglExampleBrief>
  Two one-line textareas share a keyboard, one masked for password entry.
</LvglExampleBrief>

A left textarea has `lv_textarea_set_password_mode` enabled so input is
masked, a right textarea keeps plain text, and each is labelled `Password:`
or `Text:` above it. An `lv_keyboard` occupies the bottom half. A shared
`LV_EVENT_ALL` handler retargets the keyboard on `LV_EVENT_CLICKED` or
`LV_EVENT_FOCUSED`, and logs the text on `LV_EVENT_READY`.

<LvglExample name="lv_example_textarea_2" path="widgets/textarea/lv_example_textarea_2" />

Auto-format HH:MM clock input [#auto-format-hhmm-clock-input]

<LvglExampleBrief>
  Insert the 

  `:`

   automatically after the first two digits.
</LvglExampleBrief>

A one-line textarea restricts input to `0123456789:` via
`lv_textarea_set_accepted_chars` and caps the length at 5. A
`LV_EVENT_VALUE_CHANGED` callback checks the first two characters and, once
both are digits with no colon in position 2, moves the cursor and calls
`lv_textarea_add_char(':')`. A numeric `lv_keyboard` in
`LV_KEYBOARD_MODE_NUMBER` feeds the textarea.

<LvglExample name="lv_example_textarea_3" path="widgets/textarea/lv_example_textarea_3" />

Custom textarea cursor styles [#custom-textarea-cursor-styles]

<LvglExampleBrief>
  Apply three different cursor styles to three one-line textareas.
</LvglExampleBrief>

Three `lv_style_t` values are built for `LV_PART_CURSOR | LV_STATE_FOCUSED`.
The simple style draws only a red border, the underline style disables the
background and uses `LV_BORDER_SIDE_BOTTOM` with a blue 3 px border, and the
block style fills with an orange-to-yellow vertical gradient, a red border,
and a 4 px radius. A helper creates each textarea, forces `LV_STATE_FOCUSED`,
and attaches one style so the cursor shape matches its label.

<LvglExample name="lv_example_textarea_4" path="widgets/textarea/lv_example_textarea_4" />