TextField

TextField renders a single-line <input type="text"> inside a styled container. It is the most commonly used field in forms. Additional native input attributes can be forwarded via the rest-props spread.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string | Yes | — | Current text value. | | onChange | (value: string) => void | Yes | — | Called with the new string on every keystroke. | | label | string | No | — | Label rendered above the input. | | description | string | No | — | Helper text rendered below the input. | | placeholder | string | No | — | Placeholder text shown inside the input when empty. | | disabled | boolean | No | — | Disables the input. | | containerStyle | React.CSSProperties | No | — | Styles applied to the root container div. | | inputWrapperStyle | React.CSSProperties | No | — | Styles applied to the inner wrapper div that surrounds the <input>. | | inputStyle | React.CSSProperties | No | — | Styles applied directly to the <input> element. | | labelStyle | React.CSSProperties | No | — | Styles applied to the label element. | | descriptionStyle | React.CSSProperties | No | — | Styles applied to the description paragraph. | | className | string | No | — | CSS class name applied to the inner wrapper div. | | id | string | No | — | id attribute on the <input>. |

Usage

Basic

import React, { useState } from 'react';
import TextField from '@/components/fields/TextField';

export default function Example() {
  const [name, setName] = useState('');

  return (
    <TextField
      label="Full name"
      value={name}
      onChange={setName}
      placeholder="Enter your full name"
    />
  );
}

Disabled field with description

<TextField
  label="Username"
  value={username}
  onChange={setUsername}
  disabled={true}
  description="Username cannot be changed once set."
/>