@react-aria/textfield

Basic TextField

This code demonstrates how to create a basic accessible text field using the useTextField hook from @react-aria/textfield. The hook manages the state and behavior of the text field, ensuring it is accessible.

import { useTextField } from '@react-aria/textfield';
import { useRef } from 'react';

function TextField(props) {
  let ref = useRef();
  let { labelProps, inputProps } = useTextField(props, ref);

  return (
    <div>
      <label {...labelProps}>{props.label}</label>
      <input {...inputProps} ref={ref} />
    </div>
  );
}

export default function App() {
  return <TextField label="Enter your name:" />;
}

TextField with Validation

This code demonstrates how to create a text field with validation using the useTextField hook. The text field checks if the input value is at least 5 characters long and displays an error message if it is not.

import { useTextField } from '@react-aria/textfield';
import { useRef, useState } from 'react';

function TextField(props) {
  let ref = useRef();
  let { labelProps, inputProps, errorMessageProps } = useTextField(props, ref);
  let [value, setValue] = useState('');
  let [error, setError] = useState(null);

  function validate(value) {
    if (value.length < 5) {
      setError('Value must be at least 5 characters long');
    } else {
      setError(null);
    }
  }

  return (
    <div>
      <label {...labelProps}>{props.label}</label>
      <input
        {...inputProps}
        ref={ref}
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
          validate(e.target.value);
        }}
      />
      {error && <span {...errorMessageProps}>{error}</span>}
    </div>
  );
}

export default function App() {
  return <TextField label="Enter your name:" />;
}

TextField with Custom Styles

This code demonstrates how to create a text field with custom styles using the useTextField hook. The text field is styled with padding, border, and border-radius to enhance its appearance.

import { useTextField } from '@react-aria/textfield';
import { useRef } from 'react';

function TextField(props) {
  let ref = useRef();
  let { labelProps, inputProps } = useTextField(props, ref);

  return (
    <div style={{ margin: '20px 0' }}>
      <label {...labelProps} style={{ display: 'block', marginBottom: '8px' }}>{props.label}</label>
      <input {...inputProps} ref={ref} style={{ padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }} />
    </div>
  );
}

export default function App() {
  return <TextField label="Enter your name:" />;
}