TextBox

TextBox renders Windows 98 single-line inputs and multiline text areas with optional labels.

Props

Prop	Type	Default	Description
`label` / `children`	`ReactNode`	-	Associated label content.
`value` / `defaultValue`	`string`	-	Controlled or uncontrolled text value.
`onValueChange`	`(value: string) => void`	-	Value-level text change callback for controlled usage.
`labelPosition`	`'left' \| 'top'`	`'left'`	Label layout.
`multiline`	`boolean`	`false`	Renders a textarea with custom scrollbars.
`rows`	`number`	-	Visible textarea rows.
`type`	text-like input type	`'text'`	Native input type for single-line mode.

Examples

Input states

Name

Notes

Read only

import { TextBox } from '@murasaki/react98'
import { useState } from 'react'
 
export function TextBoxBasicDemo(): React.ReactElement {
  const [name, setName] = useState('Murasaki')
 
  return (
    <div className="flex flex-col gap-3">
      <TextBox label="Name" value={name} onValueChange={setName} />
      <TextBox label="Notes" labelPosition="top" multiline rows={4} defaultValue="Pixel text needs breathing room." className="h-24 w-72" />
      <TextBox label="Read only" defaultValue="SYSTEM" readOnly />
    </div>
  )
}

ARIA

When label or children are provided, TextBox links the label to the field with htmlFor and a generated id.

Keyboard

TextBox keeps native input and textarea keyboard behavior, including text editing, selection, Tab focus movement, and multiline scrolling.

SSR

Prefer defaultValue for uncontrolled fields or provide a stable controlled value. Pixel-font fields reserve left padding so glyphs do not clip against the sunken border.