Input

Text input field with label, icons, validation, and clear button support.

Basic Usage

import { Input } from '@multinaire/expo-ui';

<Input
  placeholder="Enter text"
  value={value}
  onChangeText={setValue}
/>

Props

Prop	Type	Default	Description
placeholder	string	—	Placeholder text shown when the field is empty
value	string	—	Current value of the input
title	string	—	Field label displayed above the input
required	boolean	false	Mark the field as required. Displays a visual indicator
allowClear	boolean	false	Show a clear (×) button to reset the value
leading	IconName | ReactElement	—	Leading icon name or a custom React element rendered at the start of the input
trailing	IconName | ReactElement	—	Trailing icon name or a custom React element rendered at the end of the input
extra	ReactElement	—	Extra element rendered at the trailing end of the label row (e.g. a "Forgot password?" link)
errorText	string	—	Error message displayed below the input
multiline	boolean	false	Enable multi-line text input
minHeight	number	height.large	Minimum height, in pixels, of the field while multiline is set. Ignored unless multiline is set
maxHeight	number	height.large × 3	Maximum height, in pixels, the field grows to while multiline is set. Once reached, the content scrolls internally instead of expanding further. Ignored unless multiline is set
autoFocus	boolean	false	Focus the field as soon as it mounts, opening the keyboard
keyboardType	KeyboardTypeOptions	—	Keyboard type shown when the input is focused
flex	number	—	Flex grow value
margin	SpacingProps	—	Outer margin
testID	string	—	Test identifier for UI automation
onChangeText	(text: string) => void	—	Callback invoked on every text change
onSubmit	(text: string) => void	—	Callback invoked when the user submits the input (e.g. presses Enter)

Examples

With Label

<Input
  title="Email"
  placeholder="Enter your email"
  value={email}
  onChangeText={setEmail}
  keyboardType="email-address"
/>

Required Field

<Input
  title="Username"
  required
  placeholder="Enter username"
  value={username}
  onChangeText={setUsername}
/>

With Icons

<Input
  leading="Search"
  placeholder="Search..."
  value={search}
  onChangeText={setSearch}
/>

<Input
  leading="Lock"
  trailing="Eye"
  placeholder="Password"
  value={password}
  onChangeText={setPassword}
/>

With Clear Button

<Input
  allowClear
  placeholder="Search..."
  value={search}
  onChangeText={setSearch}
/>

With Error

<Input
  title="Email"
  placeholder="Enter email"
  value={email}
  onChangeText={setEmail}
  errorText={emailError}
/>

Multiline

A multiline field grows as its content wraps, on both native and web. It stops growing at maxHeight and scrolls internally from there, so a long value can't push the rest of your layout off-screen.

<Input
  title="Description"
  placeholder="Enter description..."
  multiline
  value={description}
  onChangeText={setDescription}
/>

Multiline with a Custom Growth Cap

The cap defaults to three times the theme's height.large. Pass maxHeight to override it.

<Input
  title="Description"
  placeholder="Enter description..."
  multiline
  maxHeight={160}
  value={description}
  onChangeText={setDescription}
/>