Input

Single‑line user input.

Input

The Input component allows users to enter a single line of text. Provide a placeholder string and handlers for onInput and onSubmit to respond to changes and submissions.

<input
  placeholder="Search package"
  focused
  onInput={(value) => setQuery(value)}
  onSubmit={(value) => runSearch(value)}
/>

Disable editing by omitting the handler or set a value property to implement controlled inputs.

<input value={username()} onSubmit={(name) => save(name)} disabled={isLoading()} />

A common UX pattern is “submit clears input”. Keep the input controlled and update its value inside onSubmit after you process the data.

<input
  value={draft()}
  placeholder="Type a command"
  onInput={(next) => setDraft(next)}
  onSubmit={(value) => {
    runCommand(value)
    setDraft("")
  }}
/>

Props

Prop	Type	Notes
`value`	`string`	Controlled input value (recommended for predictable behavior).
`placeholder`	`string`	Hint text when empty.
`focused`	`boolean`	Requests focus on mount (use carefully in multi-widget UIs).
`onInput`	`(value) => void`	Called on each edit; update state/store here.
`onSubmit`	`(value) => void`	Called on Enter/Return; good for commands/search.

Recipes

Recipe: “command prompt” input with Esc to clear and Enter to submit.

<input
  value={draft()}
  placeholder=":type a command"
  focused
  onInput={setDraft}
  onKey={(e) => {
    if (e.name === "escape") setDraft("")
  }}
  onSubmit={(value) => {
    runCommand(value)
    setDraft("")
  }}
/>