Input

Input is the React Native implementation shipped by the native-input registry item. The component adapts the registry's web-facing composition to native primitives and touch-based interaction.

The native Input is a thin styling layer around React Native's TextInput. It provides the project's standard border, background, text, placeholder, focus, and disabled styles while leaving the native input behavior intact.

Use it directly for simple inputs or compose it with the native Field components when you need labels, descriptions, and validation.

See the shadcn/ui Input documentation for the web component API, concepts, and additional examples.

InstallationCopy Anchor Link

CLICopy Anchor Link

npx shadcn add https://ui.tiesen.id.vn/r/native-input.json

ManualCopy Anchor Link

Copy and paste the following code into your project.

import * as React from 'react'import { TextInput } from 'react-native'import { cn } from '@/lib/utils'function Input({  className,  editable = true,  invalid = false,  placeholderTextColor: _placeholderTextColor,  ...props}: React.ComponentProps<typeof TextInput> & { invalid?: boolean }) {  return (    <TextInput      data-slot='input'      editable={editable}      aria-disabled={!editable}      aria-invalid={invalid}      accessibilityState={{ disabled: !editable }}      placeholderTextColor='#a1a1aa'      className={cn(        'h-10 w-full rounded-lg border border-input bg-transparent px-3 py-2 text-base text-foreground focus:border-ring dark:bg-input/30 dark:text-foreground/90',        invalid && 'border-destructive text-destructive',        !editable && 'bg-input/50 opacity-50',        className      )}      {...props}    />  )}export { Input }

FeaturesCopy Anchor Link

• Built on React Native TextInput.
• Consistent shadcn-style input appearance.
• Supports native text input behavior and events.
• Supports disabled styling.
• Works naturally with the native Field primitives.

UsageCopy Anchor Link

import { Input } from '@/components/native/input'

export function InputExample() {
  return (
    <Input
      placeholder='Enter your name'
      autoCapitalize='words'
    />
  )
}

Form inputCopy Anchor Link

Input accepts standard React Native TextInput props.

<Input
  placeholder='Email'
  keyboardType='email-address'
  autoCapitalize='none'
  autoCorrect={false}
/>

Password inputCopy Anchor Link

Use native secureTextEntry for password fields.

<Input
  placeholder='Password'
  secureTextEntry
/>

Multiline inputCopy Anchor Link

The underlying TextInput supports multiline content:

<Input
  multiline
  numberOfLines={4}
  placeholder='Write a message...'
  className='min-h-24 py-3'
/>

API ReferenceCopy Anchor Link

InputCopy Anchor Link

All standard React Native TextInput props and event handlers are forwarded.