▚Input

1import { InputRenderable, InputRenderableEvents, createCliRenderer } from "@opentui/core"
2
3const renderer = await createCliRenderer()
4
5const input = new InputRenderable(renderer, {
6id: "name-input",
7width: 25,
8placeholder: "Enter your name...",
9})
10
11input.on(InputRenderableEvents.CHANGE, (value) => {
12console.log("Input value:", value)
13})
14
15input.focus()
16renderer.root.add(input)

1import { Input, createCliRenderer } from "@opentui/core"
2
3const renderer = await createCliRenderer()
4
5const input = Input({
6placeholder: "Enter your name...",
7width: 25,
8})
9
10input.focus()
11renderer.root.add(input)

1const passwordInput = Input({
2id: "password-input",
3width: 20,
4placeholder: "••••••••",
5backgroundColor: "#222",
6focusedBackgroundColor: "#333",
7textColor: "#FFF",
8cursorColor: "#0F0",
9})
10
11const mask = (value: string) => "•".repeat(value.length)
12
13// Hook into change events to render the masked value
14passwordInput.on("change", (value) => {
15console.log("typed:", value)
16})

1const inputs = [usernameInput, passwordInput]
2let focusIndex = 0
3
4renderer.keyInput.on("keypress", (key) => {
5if (key.name === "tab") {
6  focusIndex = (focusIndex + 1) % inputs.length
7  inputs[focusIndex].focus()
8}
9})