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
value	string	-	Input value
title	string	-	Label above the input
required	boolean	false	Show required indicator
allowClear	boolean	false	Show clear button when has value
leading	MultinaireIcons | ReactElement	-	Leading icon or element
trailing	MultinaireIcons | ReactElement	-	Trailing icon or element
extra	ReactElement	-	Extra content beside title
errorText	string	-	Error message to display
multiline	boolean	false	Enable multiline input
keyboardType	KeyboardTypeOptions	-	Keyboard type
flex	number	-	Flex value
margin	SpacingProps	-	Margin spacing
onChangeText	(text: string) => void	-	Text change handler
onSubmit	(text: string) => void	-	Submit handler

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