TextField

Text input component for forms.

TextField

TextField is a form component for capturing single-line text input.

Import

import { TextField } from 'radix-native-ui';

Usage

import { TextField } from 'radix-native-ui';

<TextField
  placeholder="Enter your name"
  value={name}
  onChangeText={setName}
/>

Props

Examples

Basic Input

<TextField
  placeholder="Enter text"
  value={value}
  onChangeText={setValue}
/>

Variants

<TextField variant="outline" placeholder="Outline style" />
<TextField variant="surface" placeholder="Surface style" />
<TextField variant="soft" placeholder="Soft style" />

Sizes

<TextField size="1" placeholder="Small" />
<TextField size="2" placeholder="Medium (default)" />
<TextField size="3" placeholder="Large" />

Email Input

<TextField
  placeholder="Enter your email"
  value={email}
  onChangeText={setEmail}
  keyboardType="email-address"
  autoCapitalize="none"
  autoCorrect={false}
/>

Password Input

<TextField
  placeholder="Enter password"
  value={password}
  onChangeText={setPassword}
  secureTextEntry
/>

With Error

<TextField
  placeholder="Enter email"
  value={email}
  onChangeText={setEmail}
  error="Please enter a valid email"
/>

With Slots

TextField supports slots for adding icons or buttons on the left or right side of the input:

import { TextField } from 'radix-native-ui';
import { SearchIcon, CrossIcon } from './icons';

// Left slot (auto-detected)
<TextField.Root placeholder="Search...">
  <TextField.Slot>
    <SearchIcon />
  </TextField.Slot>
</TextField.Root>

// Right slot (explicit)
<TextField.Root placeholder="Clear">
  <TextField.Slot side="right">
    <CrossIcon />
  </TextField.Slot>
</TextField.Root>

// Both sides
<TextField.Root placeholder="Search...">
  <TextField.Slot side="left">
    <SearchIcon />
  </TextField.Slot>
  <TextField.Slot side="right">
    <CrossIcon />
  </TextField.Slot>
</TextField.Root>

Disabled

<TextField
  placeholder="Disabled input"
  disabled
/>

Form Example

<Flex direction="column" gap={3}>
  <TextField
    placeholder="Email"
    value={email}
    onChangeText={setEmail}
    keyboardType="email-address"
  />
  <TextField
    placeholder="Password"
    value={password}
    onChangeText={setPassword}
    secureTextEntry
  />
  <Button onPress={handleLogin}>Sign In</Button>
</Flex>

Related

• TextArea - Multi-line text input
• Button - Button component