Skip to main content

Textfield

Textfield is a customizable component used for capturing user input. It supports various keyboard types and validation options.

Import​

Phaselis exports one main component for Textfield.

import { Textfield } from "phaselis";
  • Textfield: Main Component import for Textfield

Usage​

Basic Usage​

import { Textfield } from "phaselis";

const Example = () => {
  return (
    <Textfield
      placeholder="Enter your name"
      onChange={(e, value) => console.log("Input changed:", value)}
    />
  );
};

export default Example;

Textarea Usage​

import { required, Textfield } from "phaselis";

const Example = () => {
  return (
    <Textfield
      name="address"
      placeholder="Enter your address information here!"
      textarea
      validations={[required("required")]}
    />
  );
};

export default Example;

Masked Textfield Usage​

import { required, Textfield } from "phaselis";
import { Masks } from "react-native-mask-input";

const Example = () => {
  return (
    <Textfield
      name="phone"
      placeholder="Enter your phone number"
      mask={Masks.USA_PHONE}
      maxLength={17}
      validations={[required("required")]}
    />
  );
};

export default Example;

Props​

tip

Other than listed props below, you can pass any prop that a TextInput component accepts.

value​

string

The current value of the input field.

<Textfield value="Initial text" />

onChange​

(event: any, value: string) => void

Callback function that triggers when the input value changes.

<Textfield onChange={(e, value) => console.log("New value:", value)} />

placeholder​

string

Placeholder text displayed when the input field is empty.

<Textfield placeholder="Enter your name" />

style​

NameTypeDescription
containerViewStyleStyle for the outer container of the input field.
textTextStyleStyle for the input text.
leftSlotViewStyleStyle for the component or icon on the left side.
rightSlotViewStyleStyle for the component or icon on the right side.

You can style the Textfield with the style prop using either an object with named styles or directly provide TextStyle properties that will be applied to the text input.

// Object with named styles
<Textfield
  style={{
    container: { padding: 10, backgroundColor: "#eef8ff" },
    text: { color: "#323439", fontSize: 16 },
    leftSlot: { marginRight: 10 },
    rightSlot: { marginLeft: 10 },
  }}
/>

// Direct text styling
<Textfield
  style={{ color: "#0066cc", fontSize: 18, fontWeight: "bold" }}
/>

containerStyle​

ViewStyle

Additional style applied directly to the container View.

<Textfield containerStyle={{ borderRadius: 8, padding: 12 }} />

leftSlotStyle​

IconStyle

Additional style applied directly to the left slot or icon.

<Textfield leftIcon="User" leftSlotStyle={{ color: "#0066cc" }} />

rightSlotStyle​

IconStyle

Additional style applied directly to the right slot or icon.

<Textfield rightIcon="Search" rightSlotStyle={{ color: "#0066cc" }} />

type​

default | text | number | email | phone | password

Specifies the type of input, which determines the keyboard type and behavior. Defaults to "default".

<Textfield type="email" placeholder="Enter your email" />

size​

ComponentSize

Defines the size of the input field, affecting padding and font size. Defaults to "md".

<Textfield size="lg" />

mask​

Mask

Applies a mask to format the input as the user types. Useful for phone numbers, dates, and more.

import { Masks } from "react-native-mask-input";
<Textfield mask={Masks.DATE_DDMMYYYY} placeholder="Enter date" />

textarea​

boolean

If true, the Textfield behaves as a multi-line text input.

<Textfield textarea numberOfLines={5} />

leftIcon​

SlotIconName

Displays an icon on the left side of the input field.

<Textfield
  placeholder="Search"
  leftIcon="Search"
/>

rightIcon​

SlotIconName

Displays an icon on the right side of the input field.

<Textfield
  placeholder="Password"
  rightIcon="Eye"
/>

LeftSlot​

ReactNode

A custom component or element rendered on the left side of the input field.

import { LucideIcon } from "phaselis";
<Textfield
  placeholder="Enter text"
  LeftSlot={() => <LucideIcon name={"User"} />}
/>

RightSlot​

ReactNode

A custom component or element rendered on the right side of the input field.

import { LucideIcon } from "phaselis";
<TextField
  placeholder="Search"
  RightSlot={() => <LucideIcon name={"Search"} />}
/>

disabled​

boolean

If true, the input field is disabled and non-editable.

<Textfield disabled />