Orbit

Input

Source

A single-line text field with optional leading and trailing slots for icons or adornments.

Basic

A controlled text field driven by React state.

const [value, setValue] = useState('')

<Input
  placeholder="Enter your name"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

Slots

preSlot renders a leading adornment and postSlot a trailing one. Slots are pointer-transparent so clicks fall through to the field.

<Input preSlot={<Search className="h-4 w-4" />} placeholder="Search" />
<Input postSlot={<Mail className="h-4 w-4" />} placeholder="you@example.com" />

Disabled

A disabled field cannot be focused or edited.

<Input placeholder="Disabled" value="Read only value" disabled />

Props

value

string

Controlled input value.

onChange

(e: ChangeEvent<HTMLInputElemen…

Called on every keystroke.

placeholder

string

Placeholder shown when the input is empty.

type

'text' | 'email' | 'password' |…default: 'text'

Native input type.

preSlot

ReactNode

Content rendered inside the field on the left, typically an icon. Adds left padding automatically.

postSlot

ReactNode

Content rendered inside the field on the right. Adds right padding automatically.

disabled

booleandefault: false

Prevents interaction and dims the field.

className

string

Merged onto the input element via tailwind-merge.