Input & TextArea

The v2 Input uses web-standard HTML APIs as the primary interface, with automatic conversion to React Native equivalents on native platforms. This means you write web-first code that works everywhere.

Installation

Input is already installed in @hanzo/gui, or you can install it independently:

npm install @hanzogui/input

Usage

A single-line text input:

import { Input } from '@hanzo/gui'

export default () => <Input placeholder="Enter text..." size="$4" />

For multi-line text input, use TextArea:

import { TextArea } from '@hanzo/gui'

export default () => <TextArea placeholder="Enter long text..." rows={4} />

Web-First API

The v2 Input uses standard HTML input attributes. Here are the key props:

Input Types

Use the standard HTML type attribute. On native, these automatically map to the appropriate keyboard and behavior:

// Password input
<Input type="password" />

// Email input (shows email keyboard on native)
<Input type="email" />

// Phone number (shows phone pad on native)
<Input type="tel" />

// Number input (shows numeric keyboard on native)
<Input type="number" />

// URL input
<Input type="url" />

// Search input
<Input type="search" />

Cross-platform mapping:

Web `type`	Native behavior
`password`	`secureTextEntry={true}`
`email`	`keyboardType="email-address"`
`tel`	`keyboardType="phone-pad"`
`number`	`keyboardType="numeric"`
`url`	`keyboardType="url"`
`search`	`inputMode="search"`

Enter Key Behavior

Use enterKeyHint to control the enter/return key label on virtual keyboards:

<Input enterKeyHint="search" />
<Input enterKeyHint="send" />
<Input enterKeyHint="done" />
<Input enterKeyHint="go" />
<Input enterKeyHint="next" />

On native, this automatically maps to returnKeyType.

Form Attributes

Standard HTML form attributes work as expected:

<Input
  name="email"
  placeholder="Enter email"
  required
  maxLength={100}
  minLength={3}
  pattern="[a-z@.]+"
  autoComplete="email"
  autoFocus
  readOnly={false}
  disabled={false}
/>

Events

Use standard web events:

<Input
  onChange={(e) => console.log(e.target.value)}
  onFocus={(e) => console.log('focused')}
  onBlur={(e) => console.log('blurred')}
  onKeyDown={(e) => {
    if (e.key === 'Enter') {
      // handle enter
    }
  }}
/>

For convenience, onChangeText is still supported but deprecated:

// Deprecated - use onChange instead
<Input onChangeText={(text) => setText(text)} />

// Preferred
<Input onChange={(e) => setText(e.target.value)} />

Submit Handling

For handling form submission on enter:

<Input
  onSubmitEditing={(e) => {
    console.log('Submitted:', e.nativeEvent.text)
  }}
/>

Styling

Input accepts all Hanzo GUI style props and supports the size prop for consistent scaling:

<Input
  size="$4"
  borderWidth={2}
  borderColor="$borderColor"
  borderRadius="$4"
  backgroundColor="$background"
  color="$color"
  placeholderTextColor="$placeholderColor"
  selectionColor="$accentColor"
  hoverStyle={{
    borderColor: '$borderColorHover',
  }}
  focusStyle={{
    borderColor: '$borderColorFocus',
  }}
/>

Native-Only Props

Some props only apply on native platforms and have no web equivalent:

keyboardAppearance (iOS): Controls the keyboard color scheme on iOS:

<Input keyboardAppearance="dark" />
<Input keyboardAppearance="light" />
<Input keyboardAppearance="default" />

textContentType (iOS): Provides hints for iOS autofill:

<Input textContentType="emailAddress" />
<Input textContentType="password" />
<Input textContentType="newPassword" />
<Input textContentType="oneTimeCode" />
<Input textContentType="telephoneNumber" />
<Input textContentType="username" />

For web autofill, use the standard autoComplete attribute instead.

Cross-Platform Text Behavior

These props work on both web and native with automatic value conversion:

autoCorrect

Controls automatic spelling correction:

// Boolean values (work everywhere)
<Input autoCorrect={false} />
<Input autoCorrect={true} />

// String values (web-style, converted on native)
<Input autoCorrect="off" />
<Input autoCorrect="on" />

autoCapitalize

Controls automatic text capitalization. Native values provide more granular control:

// Native-style values (recommended - work everywhere)
<Input autoCapitalize="none" />        // No capitalization
<Input autoCapitalize="sentences" />   // Capitalize first letter of sentences
<Input autoCapitalize="words" />       // Capitalize first letter of each word
<Input autoCapitalize="characters" />  // Capitalize all characters

// Web-style values (mapped on native)
<Input autoCapitalize="off" />  // Maps to "none" on native
<Input autoCapitalize="on" />   // Maps to "sentences" on native

Migration from v1

If you're migrating from v1 Input, here are the key changes:

v1 (React Native style)	v2 (Web style)
`secureTextEntry`	`type="password"`
`keyboardType="email-address"`	`type="email"`
`keyboardType="phone-pad"`	`type="tel"`
`keyboardType="numeric"`	`type="number"`
`keyboardType="url"`	`type="url"`
`returnKeyType="search"`	`enterKeyHint="search"`
`editable={false}`	`readOnly` or `disabled`
`onChangeText`	`onChange`
`multiline`	Use `TextArea` or `rows > 1`
`numberOfLines`	`rows`

The v1 props still work but are deprecated. We recommend updating to the web-standard props for better cross-platform consistency.

API Reference

Input Props

Accepts all HTML <input> attributes plus Hanzo GUI style props.

Prop	Type	Default	Required
size	SizeTokens	-	-
type	"text" \| "password" \| "email" \| "tel" \| "number" \| "url" \| "search"	-	-
enterKeyHint	"enter" \| "done" \| "go" \| "next" \| "previous" \| "search" \| "send"	-	-
placeholderTextColor	ColorTokens	-	-
selectionColor	ColorTokens	-	-
onSubmitEditing	(e: { nativeEvent: { text: string } }) => void	-	-
keyboardAppearance	"default" \| "light" \| "dark"	-	-
textContentType	string	-	-

TextArea Props

Accepts all Input props plus:

Prop	Type	Default	Required
rows	number	-	-

On this page