TextField

Preview

import { TextField } from '@moul-dev/ui';
import { useState } from 'react';

export default function Example() {
  const [value, setValue] = useState('');

  return (
    <TextField
      value={value}
      onChange={setValue} label="Email Address" placeholder="user@example.com" description="We will not share your email." errorMessage="Please enter a valid email address."
    />
  );
}

The TextField component is built with React Aria and styled using StyleX. It automatically handles layout composition for label, description, and validation error messages.

Import

import { TextField } from '@moul-dev/ui';

Features

Label

The text field automatically renders an accessible <Label> element above the input when the label prop is provided.

<TextField label="Full Name" placeholder="John Doe" />

Description

Use the description prop to display help text or guidelines below the input field. This automatically wires up accessibility relationships so assistive technologies can read it.

<TextField
  label="Password"
  type="password"
  description="Must be at least 8 characters long."
/>

Validation & FieldError

If the input is invalid, you can provide an error message using the errorMessage prop. This renders a <FieldError> component automatically when the field validation fails.

<TextField
  label="Email"
  type="email"
  isRequired
  isInvalid
  errorMessage="Please enter a valid email address."
/>

Standalone ErrorMessage

For manual or custom validation outside of the built-in errorMessage prop, you can import and render the standalone <ErrorMessage> component.

import { ErrorMessage } from '@moul-dev/ui';

<ErrorMessage>Invalid email address format.</ErrorMessage>

Usage

Here is a basic example of a configured TextField:

import { TextField } from '@moul-dev/ui';

export default function Example() {
  return (
    <TextField
      label="Username"
      placeholder="e.g. janesmith"
      description="Your unique handle on the platform."
      isRequired
      errorMessage="Username is required."
    />
  );
}

Props

TextField Props

Default className: react-aria-TextField