# cartflows/3.3.0/wizard/assets/src/fields/TextField.js

CartFlows – Funnel Builder & Checkout Plugin for WooCommerce, version 3.3.0. 42 lines.

- Page: https://pluginprobe.com/plugins/cartflows/3.3.0/code/wizard/assets/src/fields/TextField.js
- Raw: https://pluginprobe.com/plugins/cartflows/3.3.0/raw/wizard/assets/src/fields/TextField.js
- Modified: 2026-10-05T04:31:02+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/cartflows/3.3.0/code/wizard/assets/src/fields/TextField.js#L10-L20`.

```javascript
import { useState } from '@wordpress/element';

function InputField( props ) {
	const { attr } = props;

	const [ inputvalue, setInputvalue ] = useState( props.value );

	function handleChange( e ) {
		setInputvalue( e.target.value );
	}

	const type = props.type ? props.type : 'text';
	return (
		<>
			<div className="mb-3 xl:w-96">
				<label
					htmlFor="exampleFormControlInput1"
					className="form-label inline-block mb-2 text-gray-700"
				>
					{ props.label }
				</label>

				<input
					{ ...attr }
					type={ type }
					className="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
					name={ props.name }
					value={ inputvalue }
					id={ props.id }
					onChange={ handleChange }
					placeholder={ props.placeholder }
					min={ props.min }
					max={ props.max }
					readOnly={ props.readonly }
				></input>
			</div>
		</>
	);
}

export default InputField;

```