Text field

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/text-field.json

Then run npx expo install --fix so react-native-reanimated, react-native-svg match your Expo SDK. Files land in components/goodui-native/text-field.

Usage

import { useState } from "react";
import { TextField } from "@/components/goodui-native/text-field/text-field";

export function EmailField() {
  const [email, setEmail] = useState("");
  const [error, setError] = useState<string>();
  return (
    <TextField
      label="Email"
      placeholder="name@example.com"
      value={email}
      onChangeText={(t) => {
        setEmail(t);
        setError(undefined);
      }}
      onBlur={() => setError(email.includes("@") ? undefined : "Enter a valid email address")}
      error={error}
      helperText="We'll send the receipt here"
      keyboardType="email-address"
      autoComplete="email"
      autoCapitalize="none"
    />
  );
}

When to use

Examples

<TextField label="Password" secureTextEntry textContentType="password" autoComplete="password" />

<TextField label="Note for the driver" multiline minRows={2} maxRows={6} maxLength={200} showCount />

<TextField label="Amount" keyboardType="decimal-pad" leading={<CardIcon />} trailing={<Text tone="secondary">EUR</Text>} />

const next = useRef<ComponentRef<typeof TextInput>>(null);

<TextField label="First name" returnKeyType="next" onSubmitEditing={() => next.current?.focus()} />
<TextField label="Last name" inputRef={next} />

API reference

Motion and haptics

• •Label: rests at body size inside the field and glides up and shrinks to caption size on the morph spring when focused or filled; its color follows focus (accent) and error (danger).
• •Focus draws a 2 pt accent ring; an error turns the ring and label red and tints the filled surface.
• •An error that appears or changes shakes the field once.
• •Helper and error text slide down into place; the message line's height springs, so content below glides instead of jumping.
• •The clear button scales in and its slot opens on the snappy spring; the reveal toggle's slash draws across or retracts.
• •Multiline: the field's height springs to fit its text between minRows and maxRows, then scrolls.
• •Reduced motion: the label moves with a short fade-speed timing instead of a spring, no shake, no scaling, heights change instantly; colors still change.

• •Haptic: error when an error appears or changes (never on mount)
• •Haptic: warning once when the text reaches maxLength
• •Haptic: select on the reveal toggle
• •Haptic: tap on clear

• •Label, ring, colors, shake and heights animate on the UI thread through Reanimated shared values.
• •Typing re-renders the field once per keystroke like any controlled TextInput; nothing animates per keystroke except the multiline height when the line count changes.

Accessibility

• •The TextInput is the accessible element. Its label is accessibilityLabel, then label, then placeholder; the floating label itself is hidden from screen readers.
• •The hint is accessibilityHint, else the error or helper text, so the reason for an error is read with the field.
• •A new error message is announced with AccessibilityInfo.announceForAccessibility.
• •Clear is a button labelled 'Clear text' and is hidden from screen readers while invisible. The reveal toggle is a button labelled 'Show password' or 'Hide password'.
• •Icon buttons have a 12 pt (clear) or 10 pt (reveal) hitSlop so they reach a 44 pt target.
• •On the web a secure field autofills as current-password; Android's 'password' and 'password-new' map to current-password and new-password there.

Notes for AI

Related