Input — componente React Native

Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)

npx orn-ui add input

O instala el paquete completo e impórtalo

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

Depende de:core (theme + icons)

Uso

label / required — `required` solo pinta el asterisco — la validación queda del lado de quien lo usa.
error — Pasar un string cambia el campo a estado de error y muestra el mensaje debajo.
isPassword — Agrega el toggle de mostrar/ocultar. No conviene combinarlo con un ícono derecho propio.
rightIconName / onRightIconPress — Los patrones de limpiar, buscar o cambiar unidad: un ícono a elección con su handler.
isLoading — Para campos que resuelven algo asíncrono (una búsqueda por código, una validación remota).

Clip del demo todavía sin grabar — ver MEDIA.md

Variantes

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={() => {}} />

Código completo del demo

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

Nombre	Tipo	Por defecto	Descripción
`label?`	`string`	—	—
`required?`	`boolean`	false	Muestra un asterisco junto al label. Puramente visual, no valida nada.
`error?`	`string`	—	—
`containerStyle?`	`StyleProp<ViewStyle>`	—	—
`style?`	`StyleProp<TextStyle>`	—	—
`leftIconName?`	`IconName`	—	—
`rightIconName?`	`IconName`	—	—
`onRightIconPress?`	`() => void`	—	—
`isPassword?`	`boolean`	false	—
`isLoading?`	`boolean`	false	—