Input
A single-line text control with 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.
data-invalidboolean
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.
suppressPasswordManagerdefault: falseboolean
Adds common password-manager ignore hints for non-credential fields where extension overlays would obscure custom UI.
refRef<HTMLInputElement>
Forwarded to the underlying input (React 19 ref prop).
renderReactElement | (props, state) => ReactElement
Replace the rendered element or compose with another component (Base UI).
...propsBase UI Input.Props
All native input attributes (value, onChange, type, placeholder, etc.).
| 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.). |