MultinaireInput

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

Basic Usage

import { MultinaireInput } from '@multinaire/multinaire-design';

<MultinaireInput
  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
keyboardType	KeyboardTypeOptions	—	Keyboard type shown when the input is focused
flex	number	—	Flex grow value
margin	SpacingProps	—	Outer margin
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

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

Required Field

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

With Icons

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

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

With Clear Button

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

With Error

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

Multiline

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