Textbox

Single or multi-line text input component.

Import

import gr from 'egenerui'

Usage

Basic Textbox

const textbox = gr.Textbox({
  label: "Name",
  placeholder: "Enter your name"
})

Multi-line Textbox

const message = gr.Textbox({
  label: "Message",
  lines: 4,
  maxLines: 10,
  placeholder: "Write your message here..."
})

Password Input

const password = gr.Textbox({
  label: "Password",
  type: "password",
  placeholder: "Enter your password"
})

Props

Name	Type	Default	Description
label	string	-	Label text
value	string	''	Initial value
placeholder	string	-	Placeholder text
lines	number	1	Number of lines (multi-line when > 1)
maxLines	number	-	Maximum number of lines
type	'text' | 'password' | 'email' | 'number'	'text'	Input type
showLabel	boolean	true	Show label
interactive	boolean	true	Enable interaction
autofocus	boolean	false	Auto focus on mount
elemId	string	-	Custom element ID
elemClasses	string | string[]	-	Custom CSS classes

Methods

focus()

Focus the input element.

textbox.focus()

select()

Select all text in the input.

textbox.select()

clear()

Clear the input value.

textbox.clear()

onInput()

Bind input event handler.

textbox.onInput((value) => {
  console.log('Input changed:', value)
})

Events

change

Emitted when the value changes.

textbox.change((value) => {
  console.log('Value changed:', value)
})

Examples

Form with Validation

const email = gr.Textbox({
  label: "Email",
  type: "email",
  placeholder: "your.email@example.com"
})

const submit = gr.Button("Submit").primary()

submit.click(() => {
  const value = email.value
  if (!value.includes('@')) {
    alert('Please enter a valid email')
    return
  }
  console.log('Valid email:', value)
})

Character Counter

const text = gr.Textbox({
  label: "Text",
  lines: 3,
  maxLines: 5,
  placeholder: "Type something..."
})

const counter = gr.Label({ label: "Characters" })

text.change((value) => {
  counter.value = `${value.length} / 500 characters`
})

Live Demo

You can try the Textbox component in the Basic Form example.

Related Components

• Button - For triggering actions
• Slider - For numeric input
• Dropdown - For selection from options