Input — React Native component

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add input

Or install the whole package and import it

pnpm add orn-ui
import { Input } from 'orn-ui/input';

Depends on:core (theme + icons)

Usage

label / required — `required` only paints the asterisk — validation stays with you.
error — Passing a string switches the field to its error state and shows the message below it.
isPassword — Adds the show/hide toggle. Do not combine it with a right icon of your own.
rightIconName / onRightIconPress — The clearable, search or unit-toggle patterns: an icon of your choice plus its handler.
isLoading — For fields that resolve something async (a lookup by code, a remote validation).

Demo clip not recorded yet — see MEDIA.md

Variants

Default

<Input label="Email" required placeholder="you@example.com" value={email} onChangeText={setEmail} leftIconName="info" />

Password

<Input label="Password" isPassword value={password} onChangeText={setPassword} />

Clearable

<Input
  label="Search"
  value={search}
  onChangeText={setSearch}
  leftIconName="search"
  rightIconName={search.length > 0 ? 'close' : undefined}
  onRightIconPress={() => setSearch('')}
/>

Error

<Input label="Email" error="This field is required" value="" onChangeText={() => {}} />

Loading

<Input label="Checking availability" isLoading value="" onChangeText={() => {}} />

Read-only

<Input label="Read-only" value="Cannot be edited" editable={false} onChangeText={() => {}} />

Full demo source

const variants: VariantDef[] = [
  {
    label: 'Default',
    content: (
      <Input label="Email" required placeholder="you@example.com" value={email} onChangeText={setEmail} leftIconName="info" />
    ),
  },
  { label: 'Password', content: <Input label="Password" isPassword value={password} onChangeText={setPassword} /> },
  {
    label: 'Clearable',
    content: (
      <Input
        label="Search"
        value={search}
        onChangeText={setSearch}
        leftIconName="search"
        rightIconName={search.length > 0 ? 'close' : undefined}
        onRightIconPress={() => setSearch('')}
      />
    ),
  },
  { label: 'Error', content: <Input label="Email" error="This field is required" value="" onChangeText={() => {}} /> },
  { label: 'Loading', content: <Input label="Checking availability" isLoading value="" onChangeText={() => {}} /> },
  { label: 'Read-only', content: <Input label="Read-only" value="Cannot be edited" editable={false} onChangeText={() => {}} /> },
];
return <VariantList variants={variants} />;

Props

Name	Type	Default	Description
`label?`	`string`	—	—
`required?`	`boolean`	false	Shows an asterisk next to the label. Purely visual — it does not validate anything.
`error?`	`string`	—	—
`containerStyle?`	`StyleProp<ViewStyle>`	—	—
`style?`	`StyleProp<TextStyle>`	—	—
`leftIconName?`	`IconName`	—	—
`rightIconName?`	`IconName`	—	—
`onRightIconPress?`	`() => void`	—	—
`isPassword?`	`boolean`	false	—
`isLoading?`	`boolean`	false	—