Inputs

All text inputs extend TextInputProps, so value, onChangeText, editable, keyboardType, ... work as usual.

Input

Single line field with optional label, icons and error message.

npx midestic-rn-library add input

<Input label="Email" placeholder="you@example.com" value={email} onChangeText={setEmail} />
<Input label="Email" error="Enter a valid email address" value={bad} onChangeText={setBad} />
<Input placeholder="Search" leftIcon={<SearchIcon />} />

Prop	Type	Default	Description
label	string	-	Text rendered above the field
error	string	-	Turns the border red and shows the message
leftIcon / rightIcon	ReactNode	-	Icons inside the field
onLeftIconPress / onRightIconPress	() => void	-	Make the icons pressable
className	string	""	Extra classes on the wrapper

NumberInput

Numeric field with variant/size styling.

npx midestic-rn-library add number-input

<NumberInput label="Age" placeholder="18" keyboardType="number-pad" />
<NumberInput label="Amount" error="Minimum is 500" size="sm" />

Prop	Type	Default	Description
label	string	-	Label above the field
error	string	-	Error message + border-warning
variant	default | error | disabled	derived	Explicit visual state
size	sm | md | lg	md	Label/input font size
fullWidth	boolean	-	Stretch to container
inputClassName	string	""	Extra classes on the TextInput itself

Textarea

Multi line field.

npx midestic-rn-library add textarea

<Textarea placeholder="Tell us something..." numberOfLines={4} containerClassName="h-[140px]" />

Prop	Type	Description
className	string	Extra classes on the TextInput
containerClassName	string	Extra classes on the wrapper

SearchInput

Search field with leading/trailing icons (a magnifier by default).

npx midestic-rn-library add search-input

<SearchInput placeholder="Search trips" />

PhoneInput

Phone field with a country flag and code prefix.

npx midestic-rn-library add phone-input

<PhoneInput label="Phone number" countryCode="+234" placeholder="8012345678" />
<PhoneInput flag={<CustomFlag />} ... />

Prop	Type	Description
flag	ImageSourcePropType | ReactNode	Replaces the default flag
countryCode	string	Text shown before the field
label	string	Label above the field

SelectInput

Controlled dropdown.

npx midestic-rn-library add select-input

const [city, setCity] = useState<string | undefined>();

<SelectInput
  label="City"
  value={city}
  onValueChange={setCity}
  placeholder="Pick a city"
  options={[
    { label: "Lagos", value: "lagos" },
    { label: "Abuja", value: "abuja" },
  ]}
/>;

Prop	Type	Description
options	SelectOption[] ({ label, value })	Items shown in the sheet
value / onValueChange	string / (value: string) => void	Controlled value
label / placeholder	string	Label and placeholder

OTPInput / OTPInputSquare

Digit boxes for one time codes. Both are controlled by value/onChangeText, and every box exposes accessibilityLabel={"Digit " + index}.

Add either component individually:

npx midestic-rn-library add otp-input
npx midestic-rn-library add otp-input-square

const [code, setCode] = useState("");

<OTPInput length={6} value={code} onChangeText={setCode} />
<OTPInputSquare length={4} value={code} onChangeText={setCode} />

Prop	Type	Default	Description
length	number	4	Number of boxes
value	string	-	Controlled value
onChangeText	(value: string) => void	-	Fires with the whole code
className	string	-	Extra classes on the row