SDX TextField Component

A modern, customizable React TextField component with comprehensive functionality and styling options.

Installation

npm install sdx-input-package

Usage

import { TextField } from 'sdx-input-package';

function App() {
  const [value, setValue] = React.useState('');

  return (
    <TextField
      label="Username"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Enter your username"
      required
      variant="outlined"
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | label | string | - | Label text for the input | | value | string | - | Current value of the input | | onChange | function | - | Callback fired when input value changes | | type | string | 'text' | HTML input type | | placeholder | string | - | Placeholder text | | error | string | - | Error message to display | | helperText | string | - | Helper text to display below input | | disabled | boolean | false | Whether the input is disabled | | required | boolean | false | Whether the input is required | | fullWidth | boolean | false | Whether the input should take full width | | variant | 'outlined' | 'filled' | 'standard' | 'outlined' | Visual variant of the input | | size | 'small' | 'medium' | 'large' | 'medium' | Size of the input | | className | string | - | Additional CSS class name |

Features

• Modern and clean design
• Multiple variants (outlined, filled, standard)
• Different sizes (small, medium, large)
• Error state handling
• Helper text support
• Required field indication
• Disabled state
• Full width option
• Custom styling support
• Responsive design

License

MIT