Inputs

Inputs

Editable controls bound to State<T>. Mutating the state moves the control, dragging / typing in the control writes to the state.

TextField

Single-line editable text bound bidirectionally to a State<String>.

TextField(State<String> state)
TextField(State<String> state, String placeholder)
TextField(State<String> state, String placeholder, Style style)
TextField(State<String> state, String placeholder, Style style, Consumer<String> onSubmit)

State<String> query = State.of("");

TextField(query,
          "Search...",
          Style.width(240).height(22)
               .backgroundColor(0xFF_2A_2A_2A)
               .textColor(WHITE)
               .padding(4, 6)
               .build(),
          submitted -> dispatchSearch(submitted));

Features:

• Caret with selection (click, shift+click, drag, shift+arrow).
• Navigation: ← → Home End.
• Editing: typing, Backspace, Delete, Ctrl+A, Ctrl+C, Ctrl+X, Ctrl+V.
• Horizontal scroll when content overflows.
• Placeholder shown when empty and unfocused. Color comes from Style.placeholderColor if set, otherwise derived from textColor at reduced alpha.
• Optional onSubmit fires on Enter / numpad-Enter — independent of the bound state.

TextArea

Multi-line editable area bound to a State<String> (newlines as \n).

TextArea(State<String> state)
TextArea(State<String> state, String placeholder, Style style)
TextArea(State<String> state, String placeholder, Style style, int maxLength)
TextArea(State<String> state, String placeholder, Style style, int maxLength, int tabSpaces)

State<String> body = State.of("");

TextArea(body, "Type your changelog...",
         Style.width(MATCH_PARENT).height(160)
              .backgroundColor(0xFF_22_22_22)
              .padding(6).build(),
         /* maxLength */ 4096,
         /* tabSpaces */ 2);

Features (in addition to TextField's):

• ↑ ↓ line navigation, Home / End (line), Ctrl+Home / Ctrl+End (document), PageUp / PageDown.
• Enter inserts a newline.
• Tab inserts tabSpaces spaces (default 4). Tab cycles focus when no TextArea has focus.
• Vertical scroll auto-tracks the caret.
• Optional maxLength cap on total character count (0 = unlimited).
• Multi-line clipboard (preserves \n).

Slider

Bound bidirectionally to a numeric state. Five overloaded factories — one per numeric type. Each one accepts the same six-step overload chain.

SliderInt(State<Integer> state, int min, int max)
SliderInt(state, min, max, int step)
SliderInt(state, min, max, step, Style barStyle, Style thumbStyle)
SliderInt(state, min, max, step, barStyle, thumbStyle, Style trackStyle)
SliderInt(state, min, max, step, barStyle, thumbStyle, trackStyle, Orientation)

SliderDouble(state, min, max, ...)   // double step
SliderFloat(state, min, max, ...)    // float step
SliderLong(state, min, max, ...)     // long step
SliderShort(state, min, max, ...)    // short step

Default step is 1 for Int / Long / Short and 0 (continuous) for Double / Float.

Visual layers (each individually styleable):

• track — background bar (inactive portion).
• bar / fill — active portion.
• thumb — the draggable handle. Brightens on hover and drag.

Pass null for any style you want to leave at its default.

Orientation

SliderComponent.Orientation.HORIZONTAL    // default — min on left, max on right
SliderComponent.Orientation.VERTICAL      // min at bottom, max at top

Keyboard

When the slider is focused (click on it):

• ← / → (horizontal) or ↑ / ↓ (vertical) — move by one step (or 1% of the range when step == 0).
• Shift + arrow — move by 10× step.
• Home / End — jump to min / max.
• PageUp / PageDown — move by 10% of the range.

State<Double> volume = State.of(0.5);

SliderDouble(volume, 0.0, 1.0,
             /* step continuous */ 0.0,
             /* bar style */ null,
             /* thumb style */ null,
             /* track style */ null,
             SliderComponent.Orientation.HORIZONTAL);

ColorPicker

HSV picker bound to a State<Integer> ARGB value.

ColorPicker(State<Integer> color)
ColorPicker(State<Integer> color, boolean withAlpha)
ColorPicker(State<Integer> color, int padSize, boolean withAlpha)
ColorPicker(State<Integer> color, int padSize, boolean withAlpha, Style style)

State<Integer> tint = State.of(0xFF_FF_8800);

ColorPicker(tint, /* padSize */ 140, /* withAlpha */ true);

Layout:

• SV pad — square. Drag to set saturation (X) and value (Y).
• Hue slider — horizontal strip below the pad.
• Alpha slider — optional, horizontal, when withAlpha == true.
• Preview swatch with hex readout.

The internal HSV state is preserved across V → 0 and S → 0 transitions, so you can pick black / white without losing your selected hue.

Default padSize is 140 px.

Calendar

Month-view date picker bound to a State<LocalDate>.

Calendar(State<LocalDate> selected)
Calendar(State<LocalDate> selected, Style headerStyle, Style dayStyle, Style selectedDayStyle)

State<LocalDate> date = State.of(LocalDate.now());

Calendar(date,
         /* header  */ Style.padding(4).backgroundColor(0xFF_22_22_22).build(),
         /* day     */ Style.padding(2).build(),
         /* sel.day */ Style.backgroundColor(0xFF_00_AA_FF).build());

Layout:

• Header — month label + previous / next arrows.
• 7 × 6 day grid — clicking a day writes that LocalDate to the state.
• Days from adjacent months are dimmed and clickable (panning the displayed month to that day).