TextField Component

The TextField component in goobs-frontend is a versatile input field for text entry. It provides a user-friendly interface for various types of text input with customizable styling and behavior options.

Importing the Component

To use the TextField component in your project, import it from the goobs-frontend package:

import { TextField } from 'goobs-frontend';

Basic Usage

Here's a basic example of how to use the TextField component:

import React from 'react';
import { TextField } from 'goobs-frontend';

const TextFieldExample: React.FC = () => {
  return (
    <TextField
      name="example"
      label="Example Input"
      placeholder="Enter text here"
    />
  );
};

export default TextFieldExample;

Props

The TextField component accepts the following main props:

• name: string (required) - The name attribute for the input field.
• label: string (optional) - The label for the input field.
• placeholder: string (optional) - Placeholder text for the input field.
• value: string (optional) - The current value of the input field.
• onChange: function (optional) - Callback function triggered when the input value changes.
• onFocus: function (optional) - Callback function triggered when the input field gains focus.
• onBlur: function (optional) - Callback function triggered when the input field loses focus.
• error: boolean (optional) - Whether the input field is in an error state.
• InputProps: object (optional) - Props applied to the Input element.

Additionally, it supports most standard HTML input attributes and Material-UI TextField props.

Features

1. Customizable Styling: Supports custom styles through the sx prop and Material-UI's styling system.
2. Error State: Can display an error state for form validation.
3. Placeholder Text: Supports placeholder text for user guidance.
4. Controlled & Uncontrolled: Can be used as both controlled and uncontrolled components.
5. Accessibility: Includes proper labeling and ARIA attributes for screen readers.

Styling

You can customize the appearance of the TextField component using the sx prop or styled-components. Here's an example with custom styling:

import React from 'react';
import { TextField } from 'goobs-frontend';

const StyledTextFieldExample: React.FC = () => {
  return (
    <TextField
      name="styled-example"
      label="Styled Input"
      placeholder="Type here"
      sx={{
        '& .MuiOutlinedInput-root': {
          '& fieldset': {
            borderColor: '#1976d2',
          },
          '&:hover fieldset': {
            borderColor: '#1565c0',
          },
          '&.Mui-focused fieldset': {
            borderColor: '#0d47a1',
          },
        },
        '& .MuiInputLabel-root': {
          color: '#1976d2',
          '&.Mui-focused': {
            color: '#0d47a1',
          },
        },
      }}
    />
  );
};

export default StyledTextFieldExample;

Advanced Usage

With Form Validation

You can use the TextField component with form validation libraries or custom validation logic:

import React, { useState } from 'react';
import { TextField } from 'goobs-frontend';

const ValidatedTextFieldExample: React.FC = () => {
  const [value, setValue] = useState('');
  const [error, setError] = useState<string | null>(null);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    setValue(newValue);
    
    if (newValue.length < 3) {
      setError('Input must be at least 3 characters long');
    } else {
      setError(null);
    }
  };

  return (
    <TextField
      name="validated-input"
      label="Validated Input"
      value={value}
      onChange={handleChange}
      error={!!error}
      helperText={error}
    />
  );
};

export default ValidatedTextFieldExample;

With Custom Input Adornments

You can add custom elements before or after the input field using input adornments:

import React from 'react';
import { TextField } from 'goobs-frontend';
import { InputAdornment, IconButton } from '@mui/material';
import { Visibility, VisibilityOff } from '@mui/icons-material';

const AdornedTextFieldExample: React.FC = () => {
  const [showPassword, setShowPassword] = React.useState(false);

  const handleClickShowPassword = () => setShowPassword(!showPassword);

  return (
    <TextField
      name="password"
      label="Password"
      type={showPassword ? 'text' : 'password'}
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            <IconButton
              aria-label="toggle password visibility"
              onClick={handleClickShowPassword}
              edge="end"
            >
              {showPassword ? <VisibilityOff /> : <Visibility />}
            </IconButton>
          </InputAdornment>
        ),
      }}
    />
  );
};

export default AdornedTextFieldExample;

Accessibility

The TextField component is designed with accessibility in mind:

• It uses proper labeling to describe the input field's purpose.
• Error messages are associated with the input field for screen readers.
• The component supports keyboard navigation and interaction.

To further enhance accessibility:

1. Provide clear and descriptive labels for each TextField.
2. Use the aria-describedby prop to associate helper text or error messages with the input.
3. Ensure that any error states are clearly communicated both visually and to assistive technologies.

Best Practices

1. Clear Labels: Use concise and descriptive labels for each TextField.
2. Appropriate Validation: Implement validation that provides helpful feedback to users.
3. Consistent Styling: Maintain consistent styling across your application for better user experience.
4. Responsive Design: Ensure the TextField behaves well on various screen sizes.
5. Performance: For forms with many TextFields, consider using techniques like debouncing for real-time validation.

Performance Considerations

The TextField component itself is lightweight, but consider the following for optimal performance:

• For forms with many TextFields, implement efficient form state management (e.g., using libraries like Formik or react-hook-form).
• If implementing real-time validation or suggestions, consider debouncing the input to reduce unnecessary processing.

Troubleshooting

1. Value Not Updating: Ensure you're correctly handling the onChange event and updating the value prop for controlled components.
2. Styling Issues: Check that custom styles are not conflicting with the component's internal styles. Use the sx prop or styled-components for custom styling.
3. Validation Not Working: Verify that your validation logic is correct and that you're setting the error and helperText props appropriately.

By leveraging these features and following the best practices, you can effectively use the TextField component in your goobs-frontend projects to create user-friendly and accessible text input interfaces.