Inputs

Input

A Retend-native wrapper over native input types with controlled value semantics.

InputView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

⌘ K

tsx

import { Cell } from "retend";

import { Input } from "innate-ui";
import classes from "../docs.module.css";
import { SearchIcon } from "@/docs/icons/SearchIcon";

export function InputDemo() {
  const value = Cell.source("");

  return (
    <div class={classes.inputStack}>
      <Input
        type="text"
        value={value}
        onChange={(next) => value.set(next)}
        placeholder="Search..."
        ariaLabel="Search"
      >
        <Input.Start>
          <SearchIcon />
        </Input.Start>
        <Input.End>⌘ K</Input.End>
      </Input>
      <Input type="text" value="Invalid!" invalid />
    </div>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

InputProps

Prop	Type	Default
`type`required Native input type, which determines the `value` and `onChange` types.	`T`	`—`
`children` Optional content used by `Input.Start` and `Input.End` composition.	`JSX.Children`	`—`
`value` Input value. Checkable input types treat this as their checked state.	`JSX.ValueOrCell<JSX.InputTypeToValueMap[T]>`	`—`
`ref` Receives the native input element.	`SourceCell<HTMLInputElement \| null>`	`—`
`invalid` Whether the input is in an invalid state.	`JSX.ValueOrCell<boolean>`	`false`
`accept` Native file picker accept string for `type="file"`.	`JSX.ValueOrCell<string \| undefined>`	`—`
`capture` Preferred camera used by supporting browsers for `type="file"`.	`JSX.ValueOrCell<"user" \| "environment" \| undefined>`	`—`
`ariaDescribedBy` Ids of elements that describe the input.	`JSX.ValueOrCell<string \| undefined>`	`—`
`onChange` Called with the normalized value when the input changes.	`(value: JSX.InputTypeToValueMap[T]) => void`	`—`
`onInput` Native input handler called before `onChange`.	`EventHandlerProp<HTMLInputElement, Event>`	`—`

Inspect the typed source →