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
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
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}
/>