Input
A single-line text control with theme-aware focus, invalid, and disabled states.
Controls
import { Input } from "raft-ui";
<Input />disabled wins over data-invalid. A disabled invalid input keeps the disabled border and removes the invalid ring because the user cannot edit it.
Label and message come from Field. Input stays a pure control; set invalid on the field when the message belongs to the same validation state.
Email is required.
Use suppressPasswordManager only for non-credential fields where extension overlays would cover custom UI. Credential fields should keep native browser and password-manager help.
API#WIP
| Prop | Type | Default | Description |
|---|---|---|---|
data-invalid | boolean | — | Standalone invalid styling; the control mirrors it to aria-invalid. Inside Field, prefer Field invalid; Base UI passes invalid state to the control. |
onValueChange | (value, eventDetails) => void | — | Base UI change callback for controlled composition. |
suppressPasswordManager | boolean | false | Adds common password-manager ignore hints for non-credential fields where extension overlays would obscure custom UI. |
ref | Ref<HTMLInputElement> | — | Forwarded to the underlying input (React 19 ref prop). |
render | ReactElement | (props, state) => ReactElement | — | Replace the rendered element or compose with another component (Base UI). |
...props | Base UI Input.Props | — | All native input attributes (value, onChange, type, placeholder, etc.). |