Input

The Input component supports 14+ different input types including text, email, password, date, phone, IBAN, credit card, and more.

Features

• 📝 14+ input types
• ✅ Validation support
• 🎭 Input masking
• 📅 Date/DateTime pickers
• 🔍 Search with autocomplete
• 💰 Amount input
• ☑️ Checkbox variant
• 🎨 Light/dark themes

Basic Usage

import {Input} from '@tansuk/rott-ui'

<Input
  name='email'
  type='email'
  placeholder='Enter your email'
  value={email}
  onChangeText={setEmail}
/>

Input Types

Each input type has its own dedicated page with specific props, examples, and best practices:

• Amount - Currency and numeric input with formatting
• Checkbox - Checkbox input
• Credit Card - Credit card number with masking
• CVC - Card security code
• Date - Date and datetime picker
• Email - Email input with validation
• Expire Date - Card expiration date
• IBAN - IBAN with formatting
• Numeric - Numbers only
• Password - Password with show/hide
• Phone - Phone number with masking
• PIN - PIN/OTP input
• Search - Search with autocomplete
• Select - Dropdown select

With Labels

<Input
  name="email"
  type="email"
  label="Email Address"
  placeholder="Enter your email"
/>

Validation

<Input
  name="email"
  type="email"
  placeholder="Email"
  value={email}
  onChangeText={setEmail}
  errorMessage={errors.email}
  touched={touched.email}
/>

Props

Prop	Type	Default	Description
name	string	Required	Input identifier
type	InputType	'default'	Input type
value	string	-	Input value
onChangeText	(text: string) => void	-	Change handler
placeholder	string	-	Placeholder text
label	string | InputLabelProps	-	Input label
errorMessage	string	-	Error message
touched	boolean	false	Touched state
theme	'light' | 'dark'	'light'	Theme
disabled	boolean	false	Disabled state

Quick Example

import {Input} from '@tansuk/rott-ui'

// Basic text input
<Input name='username' type='default' placeholder='Username' />

// Email with validation
<Input name='email' type='email' label='Email' />

// Password with show/hide
<Input name='password' type='password' label='Password' />

// Phone with masking
<Input name='phone' type='phone' mask='+1 ([000]) [000]-[0000]' />

Related

• Forms Guide - Complete form examples with validation
• Toggle - Toggle switch component