Builds a box element.

Accepts props and children either as a do block or as a list:

box(border: :single) # empty box
box [border: :single] do
  text("hi")
end
box([border: :single], [text("hi")])

@spec input(keyword()) :: Tuix.Element.t()

Builds a single-line text input element.

Inputs join the Tab focus order automatically (focusable: true) and require an :id. The value is controlled by the app: handle %Tuix.Event.Input{} and assign the new value back into state, LiveView form style — otherwise the input appears frozen.

input(id: :email, value: assigns.email, placeholder: "you@example.com")

def handle_event(%Tuix.Event.Input{id: :email, value: value}, app),
  do: {:noreply, assign(app, email: value)}

While focused, printable keys and :space, :backspace, :delete, :left / :right / :home / :end edit the value; everything else (:enter, :escape, ctrl combos, Tab traversal) falls through to the app with target set. See Tuix.Components.Input for the editing core and the module docs above for the accepted props.

Builds a scroll box: a focusable container whose children are laid out at their full height and scrolled vertically within the box.

Scroll boxes require an :id and join the Tab focus order automatically (focusable: true). While focused, :up / :down scroll by a row, :page_up / :page_down by a viewport, and :home / :end jump to the boundaries — clamped, with boundary presses consumed. The offset is framework-managed (like an input's cursor): no event reaches the app and there is nothing to assign back.

scroll_box id: :log, border: :single, height: 10 do
  for line <- assigns.lines, do: text(line)
end

When the content overflows, a proportional scrollbar is drawn in the rightmost column — over the border when the box has one, otherwise in a reserved column. With snap: :bottom the box starts scrolled to the bottom and stays pinned there as content grows (chat logs, tails); scrolling up detaches, and returning to the bottom re-attaches.

Content always flows in a column, and :flex_grow on children has no effect (the content area is as tall as the content). Accepts props and children as a do block or a list, like box/2. See the module docs above for the accepted props.

@spec select(keyword()) :: Tuix.Element.t()

Builds a vertical list-picker element.

Selects join the Tab focus order automatically (focusable: true) and require an :id. They are controlled: the selection follows the highlight, so :up / :down / :home / :end emit %Tuix.Event.Select{} with the new value immediately, and the app assigns it back into state:

select(id: :plan, options: [{"Basic", :basic}, {"Pro", :pro}], value: assigns.plan)

def handle_event(%Tuix.Event.Select{id: :plan, value: value}, app),
  do: {:noreply, assign(app, plan: value)}

Navigation is clamped (no wrap-around). :enter, :space, and everything else fall through to the app with target set — so commit-on-Enter flows keep a draft value in assigns and match %Tuix.Event.Key{key: :enter, target: :plan}. When the select is shorter than its option list, it scrolls to keep the selection visible. See the module docs above for the accepted props.

@spec text(
  String.t(),
  keyword()
) :: Tuix.Element.t()

Builds a text element.

text("Hello")
text("Hello", fg: "#00FF00", attrs: [:bold])

Multi-line content (embedded newlines) renders one line per row.