# TextField

A flexible text input field for capturing user data with various styling and state options.

### **Import**
```tsx
import { TextField } from '@app-studio/web';
```

### **Default**
```tsx
import React from 'react';
import { Button } from '../../../Button/Button';

import { Horizontal } from 'app-studio';

import { TextField } from '../TextField';

export const DefaultInput = () => {
  const handleSubmit = (event: any) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    alert(`Hello, ${formData.get('surname')}`);
  };
  return (
    <form onSubmit={handleSubmit}>
      <Horizontal gap={10} alignItems="center" flexWrap="nowrap">
        <TextField name="surname" />
        <Button type="submit" height="40px" isAuto>
          Submit
        </Button>
      </Horizontal>
    </form>
  );
};
```

### **helperText**
Optional helper text that appears below the TextField.

- **Type:** `string`
- **Default:** `undefined`
- **Possible Values:** ``

```tsx
import { useState } from 'react';
import React from 'react';
import { Button } from '../../../Button/Button';

import { TextField } from '../../../Form/TextField/TextField';

import { Vertical } from 'app-studio';

export const HelperTextInput = () => {
  const initialValues = {
    firstName: '',
    lastName: '',
  };
  const [formValues, setFormValues] = useState(initialValues);
  const [formErrors, setFormErrors] = useState(initialValues);

  const validate = (values: any) => {
    const errors: any = {};
    if (!values.firstName) {
      errors.firstName = 'Required';
    }
    if (!values.lastName) {
      errors.lastName = 'Required';
    }
    setFormErrors(errors);
  };

  const handleChange = (event: any) => {
    setFormValues({ ...formValues, [event.target.name]: event.target.value });
  };

  const handleSubmit = (event: any) => {
    event.preventDefault();
    validate(formValues);
    if (Object.values(formErrors).length === 0) {
      alert(`Hello, ${formValues.firstName} ${formValues.lastName} `);
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <Vertical gap={10} alignItems="center" flexWrap="nowrap">
        <TextField
          name="firstName"
          placeholder="First Name"
          helperText={formErrors.firstName}
          error={!!formErrors.firstName}
          onChange={handleChange}
        />
        <TextField
          name="lastName"
          placeholder="Last Name"
          helperText={formErrors.lastName}
          error={!!formErrors.lastName}
          onChange={handleChange}
        />
        <Button type="submit" height="40px" isAuto>
          Submit
        </Button>
      </Vertical>
    </form>
  );
};
```

### **placeholder**
Optional placeholder text shown inside the TextField when empty.

- **Type:** `string`
- **Default:** `undefined`
- **Possible Values:** ``

```tsx
import React from 'react';
import { Button } from '../../../Button/Button';

import { Horizontal } from 'app-studio';

import { TextField } from '../TextField';

export const Placeholder = () => {
  const handleSubmit = (event: any) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    alert(`Hello, ${formData.get('surname')}`);
  };
  return (
    <form onSubmit={handleSubmit}>
      <Horizontal gap={10} alignItems="center" flexWrap="nowrap">
        <TextField name="surname" placeholder="Surname" />
        <Button type="submit" height="40px" isAuto>
          Submit
        </Button>
      </Horizontal>
    </form>
  );
};
```

### **isClearable**
Optional flag that when true allows the TextField to be cleared.

- **Type:** `boolean`
- **Default:** `true`
- **Possible Values:** ``

```tsx
import React from 'react';
import { Vertical } from 'app-studio';

import { TextField } from '../TextField';

export const IsClearableDemo = () => {
  return (
    <Vertical gap={10} width="300px">
      <TextField value="Clear Button" size="xs" />
      <TextField size="xs" value="No Clear Button" isClearable={false} />
    </Vertical>
  );
};
```

### **ColorScheme**

```tsx
import React from 'react';
import { Vertical } from 'app-studio';

import { TextField } from '../TextField';

export const ColorSchemeDemo = () => {
  return (
    <Vertical gap={10} width="300px">
      <TextField name="surname" label="Surname" />
      <TextField name="name" label="Name" variant="outline" />
    </Vertical>
  );
};
```

### **Default**

```tsx
import React from 'react';
import { Button } from '../../../Button/Button';

import { Horizontal } from 'app-studio';

import { TextField } from '../TextField';

export const DefaultInput = () => {
  const handleSubmit = (event: any) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    alert(`Hello, ${formData.get('surname')}`);
  };
  return (
    <form onSubmit={handleSubmit}>
      <Horizontal gap={10} alignItems="center" flexWrap="nowrap">
        <TextField name="surname" />
        <Button type="submit" height="40px" isAuto>
          Submit
        </Button>
      </Horizontal>
    </form>
  );
};
```

### **DisabledInput**

```tsx
import React from 'react';

import { TextField } from '../TextField';

export const DisabledInput = () => {
  return <TextField name="disabled" placeholder="Disabled" isDisabled />;
};
```

### **ErrorInput**

```tsx
import { useState } from 'react';
import React from 'react';
import { Button } from '../../../Button/Button';

import { TextField } from '../../../Form/TextField/TextField';

import { Vertical } from 'app-studio';

export const ErrorInput = () => {
  const initialValues = {
    firstName: '',
    lastName: '',
    email: '',
  };
  const [formValues, setFormValues] = useState(initialValues);
  const [formErrors, setFormErrors] = useState(initialValues);

  const validate = (values: any) => {
    const errors: any = {};

    if (!values.firstName) {
      errors.firstName = 'Required';
    }
    if (!values.lastName) {
      errors.lastName = 'Required';
    }
    if (!values.email) {
      errors.email = 'Required';
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
      errors.email = 'Invalid email address';
    }
    setFormErrors(errors);
  };

  const handleChange = (event: any) => {
    setFormValues({ ...formValues, [event.target.name]: event.target.value });
  };

  const handleSubmit = (event: any) => {
    event.preventDefault();
    validate(formValues);
    if (Object.values(formErrors).length === 0) {
      alert(
        `Hello, ${formValues.firstName} ${formValues.lastName} ${formValues.email}`
      );
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <Vertical gap={10} alignItems="center" flexWrap="nowrap">
        <TextField
          name="firstName"
          placeholder="First Name"
          error={!!formErrors.firstName}
          onChange={handleChange}
        />
        <TextField
          name="lastName"
          placeholder="Last Name"
          error={!!formErrors.lastName}
          onChange={handleChange}
        />
        <TextField
          name="email"
          placeholder="Email"
          error={!!formErrors.email}
          onChange={handleChange}
        />
        <Button type="submit" height="40px" isAuto>
          Submit
        </Button>
      </Vertical>
    </form>
  );
};
```

### **HelperText**

```tsx
import { useState } from 'react';
import React from 'react';
import { Button } from '../../../Button/Button';

import { TextField } from '../../../Form/TextField/TextField';

import { Vertical } from 'app-studio';

export const HelperTextInput = () => {
  const initialValues = {
    firstName: '',
    lastName: '',
  };
  const [formValues, setFormValues] = useState(initialValues);
  const [formErrors, setFormErrors] = useState(initialValues);

  const validate = (values: any) => {
    const errors: any = {};
    if (!values.firstName) {
      errors.firstName = 'Required';
    }
    if (!values.lastName) {
      errors.lastName = 'Required';
    }
    setFormErrors(errors);
  };

  const handleChange = (event: any) => {
    setFormValues({ ...formValues, [event.target.name]: event.target.value });
  };

  const handleSubmit = (event: any) => {
    event.preventDefault();
    validate(formValues);
    if (Object.values(formErrors).length === 0) {
      alert(`Hello, ${formValues.firstName} ${formValues.lastName} `);
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <Vertical gap={10} alignItems="center" flexWrap="nowrap">
        <TextField
          name="firstName"
          placeholder="First Name"
          helperText={formErrors.firstName}
          error={!!formErrors.firstName}
          onChange={handleChange}
        />
        <TextField
          name="lastName"
          placeholder="Last Name"
          helperText={formErrors.lastName}
          error={!!formErrors.lastName}
          onChange={handleChange}
        />
        <Button type="submit" height="40px" isAuto>
          Submit
        </Button>
      </Vertical>
    </form>
  );
};
```

### **LabelInput**

```tsx
import React from 'react';
import { Button } from '../../../Button/Button';

import { Horizontal } from 'app-studio';

import { TextField } from '../TextField';

export const LabelInput = () => {
  const handleSubmit = (event: any) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    alert(`Hello, ${formData.get('surname')}`);
  };
  return (
    <form onSubmit={handleSubmit}>
      <Horizontal gap={10} alignItems="center" flexWrap="nowrap">
        <TextField name="surname" label="Surname" />
        <Button type="submit" height="40px" isAuto>
          Submit
        </Button>
      </Horizontal>
    </form>
  );
};
```

### **LeftChild**

```tsx
import React from 'react';
import { ProfileIcon } from '../../../Icon/Icon';

import { TextField } from '../TextField';

export const LeftInput = () => {
  return (
    <TextField
      name="name"
      placeholder="Name"
      left={<ProfileIcon color="black" widthHeight={16} />}
    />
  );
};
```

### **Placeholder**

```tsx
import React from 'react';
import { Button } from '../../../Button/Button';

import { Horizontal } from 'app-studio';

import { TextField } from '../TextField';

export const Placeholder = () => {
  const handleSubmit = (event: any) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    alert(`Hello, ${formData.get('surname')}`);
  };
  return (
    <form onSubmit={handleSubmit}>
      <Horizontal gap={10} alignItems="center" flexWrap="nowrap">
        <TextField name="surname" placeholder="Surname" />
        <Button type="submit" height="40px" isAuto>
          Submit
        </Button>
      </Horizontal>
    </form>
  );
};
```

### **ReadOnlyInput**

```tsx
import React from 'react';

import { TextField } from '../TextField';

export const ReadOnlyInput = () => {
  return <TextField name="disabled" value="Sarah Jane" isReadOnly />;
};
```

### **RightChild**

```tsx
import React from 'react';
import { EditIcon } from '../../../Icon/Icon';

import { TextField } from '../TextField';

export const RightInput = () => {
  return (
    <TextField
      name="name"
      placeholder="Name"
      right={<EditIcon color="black" widthHeight={16} />}
    />
  );
};
```

### **ShapeInput**

```tsx
import React from 'react';
import { Vertical } from 'app-studio';

import { TextField } from '../TextField';
import { Shape } from '../TextField/TextField.type';

export const ShapesInput = () => {
  return (
    <Vertical gap={10} width="300px">
      {['default', 'square', 'rounded', 'pill'].map((shape, index) => (
        <TextField
          key={index}
          name={shape}
          placeholder={shape}
          shape={shape as Shape}
          variant="outline"
        />
      ))}
    </Vertical>
  );
};
```

### **SizeInput**

```tsx
import React from 'react';
import { Vertical } from 'app-studio';

import { TextField } from '../TextField';

export const SizeInput = () => {
  return (
    <Vertical gap={10} width="300px">
      <TextField name="xs" placeholder="xs" size="xs" />
      <TextField name="sm" placeholder="sm" size="xs" />
      <TextField name="md" placeholder="md" size="md" />
      <TextField name="lg" placeholder="lg" size="lg" />
      <TextField name="xl" placeholder="xl" size="md" />
    </Vertical>
  );
};
```

### **StylesInput**

```tsx
import React from 'react';
import { Button } from '../../../Button/Button';

import { Horizontal } from 'app-studio';

import { TextField } from '../TextField';

export const StyledInput = () => {
  const handleSubmit = (event: any) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    alert(`Hello, ${formData.get('surname')}`);
  };
  return (
    <form onSubmit={handleSubmit}>
      <Horizontal gap={10} alignItems="center" flexWrap="nowrap">
        <TextField
          name="surname"
          label="Surname"
          variant="none"
          shadow={{ boxShadow: 'rgba(0, 0, 0, 0.20) 0px 3px 8px' }}
          views={{
            container: {
              borderRadius: 8,
              borderColor: 'theme-primary',
              borderStyle: 'solid',
              borderWidth: 1,
            },
            text: { color: 'theme-primary' },
            label: { color: 'theme-primary' },
          }}
        />
        <Button type="submit" height="40px" isAuto>
          Submit
        </Button>
      </Horizontal>
    </form>
  );
};
```

### **VariantsInputs**

```tsx
import React from 'react';
import { TextField } from '../../../Form/TextField/TextField';

import { Vertical } from 'app-studio';

import { Variant } from '../TextField/TextField.type';

export const VariantsInput = () => {
  return (
    <Vertical gap={10} width="300px">
      {['default', 'outline', 'none'].map((variant, index) => (
        <TextField
          key={index}
          name={variant}
          placeholder={variant}
          variant={variant as Variant}
        />
      ))}
    </Vertical>
  );
};
```

### **DesignSystem**

```tsx
/**
 * TextField Examples - Design System
 *
 * Showcases the TextField component following the design guidelines:
 * - Typography: Inter/Geist font, specific sizes/weights
 * - Spacing: 4px grid system
 * - Colors: Neutral palette with semantic colors
 * - Rounded corners: Consistent border radius
 * - Transitions: Subtle animations
 */

import React from 'react';
import { TextField } from '../TextField';
import { Vertical } from 'app-studio';
import { Text } from 'app-studio';
import { View } from 'app-studio';
import { SearchIcon, UserIcon, LockIcon } from '../../../Icon/Icon';

export const DesignSystemTextFields = () => (
  <Vertical gap={24}>
    {/* Size Variants */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        Size Variants
      </Text>
      <Vertical gap={16}>
        <TextField size="xs" placeholder="Extra Small Input" />

        <TextField size="sm" placeholder="Small Input" />

        <TextField size="md" placeholder="Medium Input (Default)" />

        <TextField size="lg" placeholder="Large Input" />

        <TextField size="xl" placeholder="Extra Large Input" />
      </Vertical>
    </View>

    {/* Shape Variants */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        Shape Variants
      </Text>
      <Vertical gap={16}>
        <TextField shape="default" placeholder="Default Shape (Rounded)" />

        <TextField shape="square" placeholder="square Corners" />

        <TextField shape="rounded" placeholder="Rounded Corners" />

        <TextField shape="pill" placeholder="Pill Shaped" />
      </Vertical>
    </View>

    {/* Style Variants */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        Style Variants
      </Text>
      <Vertical gap={16}>
        <TextField variant="outline" placeholder="Outline Variant" />

        <TextField
          variant="default"
          placeholder="Default Variant (Underline)"
        />

        <TextField
          variant="none"
          placeholder="No Border Variant"
          shadow={{
            boxShadow:
              '0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)',
          }}
        />
      </Vertical>
    </View>

    {/* States */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        States
      </Text>
      <Vertical gap={16}>
        <TextField placeholder="Default State" />

        <TextField placeholder="Disabled State" isDisabled />

        <TextField
          placeholder="Read-only State"
          isReadOnly
          value="This is read-only text"
        />

        <TextField placeholder="Error State" error="This field is required" />

        <TextField
          placeholder="With Helper Text"
          helperText="This is some helpful information"
        />
      </Vertical>
    </View>

    {/* With Icons */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        With Icons
      </Text>
      <Vertical gap={16}>
        <TextField
          placeholder="Search..."
          left={<SearchIcon widthHeight={20} color="color-gray-400" />}
        />

        <TextField
          placeholder="Username"
          left={<UserIcon widthHeight={20} color="color-gray-400" />}
        />

        <TextField
          placeholder="Password"
          left={<LockIcon widthHeight={20} color="color-gray-400" />}
          type="password"
        />

        <TextField
          placeholder="With Left and Right Icons"
          left={<UserIcon widthHeight={20} color="color-gray-400" />}
          right={<SearchIcon widthHeight={20} color="color-gray-400" />}
        />
      </Vertical>
    </View>

    {/* With Labels */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        With Labels
      </Text>
      <Vertical gap={16}>
        <TextField label="Username" placeholder="Enter your username" />

        <TextField label="Email" placeholder="Enter your email" type="email" />

        <TextField
          label="Password"
          placeholder="Enter your password"
          type="password"
        />
      </Vertical>
    </View>

    {/* Custom Styling */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        Custom Styling
      </Text>
      <Vertical gap={16}>
        <TextField
          placeholder="Primary Theme"
          views={{
            container: {
              borderColor: 'theme-primary',
              borderWidth: '2px',
            },
            label: {
              color: 'theme-primary',
              fontWeight: '600',
            },
            field: {
              color: 'theme-primary',
            },
          }}
        />

        <TextField
          placeholder="Custom Border Radius"
          views={{
            container: {
              borderRadius: '16px',
              borderColor: 'color-purple-400',
              backgroundColor: 'color-purple-50',
            },
          }}
        />

        <TextField
          placeholder="Custom Shadow"
          variant="none"
          shadow={{
            boxShadow: '0 4px 14px rgba(0, 0, 0, 0.1)',
          }}
          views={{
            container: {
              borderRadius: '8px',
              backgroundColor: 'color-white',
              transition: 'all 0.3s ease',
              _hover: {
                boxShadow: '0 6px 20px rgba(0, 0, 0, 0.15)',
                transform: 'translateY(-2px)',
              },
            },
          }}
        />
      </Vertical>
    </View>
  </Vertical>
);
```

### **Index**

```tsx
export * from './Default';
export * from './designSystem';
export * from './DisabledInput';
export * from './ErrorInput';
export * from './HelperText';
export * from './LabelInput';
export * from './LeftChild';
export * from './Placeholder';
export * from './ReadOnlyInput';
export * from './RightChild';
export * from './ShapeInput';
export * from './SizeInput';
export * from './StylesInput';
export * from './VariantsInputs';
export * from './ColorScheme';
export * from './isClearable';
```