TextField

TextField is a high-level text entry component that provides native styles and behaviors out of the box. Unlike the low-level TextInput, which is a bare primitive, TextField follows platform-specific design guidelines (such as Material 3 on Android) and includes built-in styling for focus states, labels, and containers.

Basic Usage

TextField can be used as a controlled or uncontrolled component. For controlled usage, you can pass a standard Solid signal or use the TextFieldRef for imperative control.

import { createSignal } from "solid-js";
import { TextField, View } from "@zynthjs/components";

function LoginScreen() {
  const [email, setEmail] = createSignal("");

  return (
    <View style={{ padding: 20 }}>
      <TextField
        value={email()}
        onChange={setEmail}
        placeholder="Email Address"
        keyboardType="email"
      />
    </View>
  );
}

Visual Variants

On Android, TextField supports multiple Material Design variants through the variant prop.

<TextField variant="filled" placeholder="Filled (Default)" />
<TextField variant="outlined" placeholder="Outlined" />
<TextField variant="none" placeholder="No Container (Android only)" />

Note: On iOS, these variants map to standard native text field styles where applicable.

Imperative Control with useTextFieldRef

For more advanced scenarios, such as programmatically focusing a field or clearing its content, use the useTextFieldRef hook and pass the resulting ref to the component.

import { TextField, useTextFieldRef, Button, View } from "@zynthjs/components";

function SearchBar() {
  const ref = useTextFieldRef();

  return (
    <View>
      <TextField ref={ref} placeholder="Search..." />
      <Button title="Clear" onPress={() => ref.clear()} />
      <Button title="Focus" onPress={() => ref.focus()} />
    </View>
  );
}

Props

TextFieldRef API

The TextFieldRef (created via useTextFieldRef) provides the following methods: