Sdx-input-package NPM

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