Raxol.UI.Components.Input.TextField (Raxol v2.6.0)

View Source

A text field component for single-line text input.

It supports validation, placeholders, masks, and styling.

Unicode and display width

The cursor (cursor_pos) and scroll position (scroll_offset) are grapheme indices, while width is measured in display cells. Internal helpers translate between the two so CJK characters, emoji, and ZWJ sequences scroll and clip on cell boundaries instead of grapheme counts. Cell width is sourced from Raxol.UI.TextMeasure (single source of truth).

Summary

Types

t()

State for the TextField component.

Functions

handle_event(arg1, state, context)

Handles events for the TextField component, such as keypresses, focus, and blur.

init(props)

Initializes the TextField component state from the given props.

mount(state)

Mounts the TextField component. Performs any setup needed after initialization.

render(state, context)

Renders the TextField component using the current state and context.

unmount(state)

Unmounts the TextField component, performing any necessary cleanup.

update(message, state)

Updates the TextField component state in response to messages or prop changes.

Types

t()

@type t() :: %Raxol.UI.Components.Input.TextField{
  cursor_pos: non_neg_integer(),
  disabled: boolean(),
  focused: boolean(),
  id: any(),
  placeholder: String.t(),
  scroll_offset: non_neg_integer(),
  secret: boolean(),
  style: map(),
  theme: map(),
  value: String.t(),
  width: non_neg_integer()
}

State for the TextField component.

  • :id - unique identifier
  • :value - current text value
  • :placeholder - placeholder text
  • :style - style map
  • :theme - theme map
  • :disabled - whether the field is disabled
  • :secret - whether to mask input (e.g., password)
  • :focused - whether the field is focused
  • :cursor_pos - cursor position
  • :scroll_offset - horizontal scroll offset
  • :width - visible width of the field (not in defstruct, but added in init)

Functions

handle_event(arg1, state, context)

Handles events for the TextField component, such as keypresses, focus, and blur.

init(props)

Initializes the TextField component state from the given props.

mount(state)

Mounts the TextField component. Performs any setup needed after initialization.

render(state, context)

Renders the TextField component using the current state and context.

unmount(state)

Unmounts the TextField component, performing any necessary cleanup.

update(message, state)

Updates the TextField component state in response to messages or prop changes.