Input

The Input component wraps React Native's TextInput with consistent styling, focus ring support, and placeholder theming. It integrates seamlessly with form layouts and supports disabled states.

Preview

Installation

npx novaui-cli add input

Import

import { Input } from 'novaui-components'

Basic Usage

A simple text input with a placeholder:

import { Input } from 'novaui-components'

export function BasicInput() {
  return <Input placeholder="Enter your name" />
}

Examples

Email Input

<Input
  placeholder="you@example.com"
  keyboardType="email-address"
  autoCapitalize="none"
/>

Disabled State

<Input placeholder="Cannot edit" editable={false} />

With Value

import { useState } from 'react'
import { Input } from 'novaui-components'

export function ControlledInput() {
  const [value, setValue] = useState('John Doe')

  return (
    <Input
      value={value}
      onChangeText={setValue}
      placeholder="Full name"
    />
  )
}

Props API

InputProps

Extends React.ComponentPropsWithoutRef<typeof TextInput> and includes:

All standard React Native TextInput props are also supported (value, onChangeText, keyboardType, autoCapitalize, etc.).

Best Practices

1. Always include a placeholder: Provide clear placeholder text to indicate the expected input format
2. Use with Field: Wrap inputs in a Field component with a label for accessible forms
3. Keyboard types: Set appropriate keyboardType for the data type (email, phone, numeric)
4. Controlled inputs: Use value and onChangeText for form state management

Related Components

• Use with Field and FieldLabel for labeled form inputs
• Combine with InputGroup for inputs with icons or addons
• Pair with Textarea for multiline text entry
• Use InputOTP for verification code inputs