React UI Components Documentation
The React Input is a text input with auto-complete from a local or remote data source. This guide adds the React Input (jqxInput) to an app, then shows how to set its options, handle its events and call its methods.
jqwidgets-scriptsjqwidgets-scripts/jqwidgets-react-tsx/jqxinput 
In a React project (to start one, see Getting started with React), add the package:
npm install jqwidgets-scriptsimport JqxInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.tailwind-blue-dark.css';jqx.base.css is required. The second file is a theme; pick one of the jqx.*.css files (material, fluent, light, dark and more) and pass its name to the theme prop.
The source of the live Default Functionality demo:
import type { JSX } from 'react';
import JqxInput from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
const source: string[] = [
'Afghanistan',
'Albania',
'Algeria',
'Andorra',
'Angola',
'Antarctica',
'Antigua and Barbuda',
'Argentina',
'Armenia',
'Australia',
'Austria',
'Azerbaijan',
'Bahamas',
'Bahrain',
'Bangladesh',
'Barbados',
'Belarus',
'Belgium',
'Belize',
'Benin',
'Bermuda',
'Bhutan',
'Bolivia',
'Bosnia and Herzegovina',
'Botswana',
'Brazil',
'Brunei',
'Bulgaria',
'Burkina Faso',
'Burma',
'Burundi',
'Cambodia',
'Cameroon',
'Canada',
'Cape Verde',
'Central African Republic',
'Chad',
'Chile',
'China',
'Colombia',
'Comoros',
'Congo, Democratic Republic',
'Congo, Republic of the',
'Costa Rica',
"Cote d'Ivoire",
'Croatia',
'Cuba',
'Cyprus',
'Czech Republic',
'Denmark',
'Djibouti',
'Dominica',
'Dominican Republic',
'East Timor',
'Ecuador',
'Egypt',
'El Salvador',
'Equatorial Guinea',
'Eritrea',
'Estonia',
'Ethiopia',
'Fiji',
'Finland',
'France',
'Gabon',
'Gambia',
'Georgia',
'Germany',
'Ghana',
'Greece',
'Greenland',
'Grenada',
'Guatemala',
'Guinea',
'Guinea-Bissau',
'Guyana',
'Haiti',
'Honduras',
'Hong Kong',
'Hungary',
'Iceland',
'India',
'Indonesia',
'Iran',
'Iraq',
'Ireland',
'Israel',
'Italy',
'Jamaica',
'Japan',
'Jordan',
'Kazakhstan',
'Kenya',
'Kiribati',
'Korea, North',
'Korea, South',
'Kuwait',
'Kyrgyzstan',
'Laos',
'Latvia',
'Lebanon',
'Lesotho',
'Liberia',
'Libya',
'Liechtenstein',
'Lithuania',
'Luxembourg',
'Macedonia',
'Madagascar',
'Malawi',
'Malaysia',
'Maldives',
'Mali',
'Malta',
'Marshall Islands',
'Mauritania',
'Mauritius',
'Mexico',
'Micronesia',
'Moldova',
'Mongolia',
'Morocco',
'Monaco',
'Mozambique',
'Namibia',
'Nauru',
'Nepal',
'Netherlands',
'New Zealand',
'Nicaragua',
'Niger',
'Nigeria',
'Norway',
'Oman',
'Pakistan',
'Panama',
'Papua New Guinea',
'Paraguay',
'Peru',
'Philippines',
'Poland',
'Portugal',
'Qatar',
'Romania',
'Russia',
'Rwanda',
'Samoa',
'San Marino',
' Sao Tome',
'Saudi Arabia',
'Senegal',
'Serbia and Montenegro',
'Seychelles',
'Sierra Leone',
'Singapore',
'Slovakia',
'Slovenia',
'Solomon Islands',
'Somalia',
'South Africa',
'Spain',
'Sri Lanka',
'Sudan',
'Suriname',
'Swaziland',
'Sweden',
'Switzerland',
'Syria',
'Taiwan',
'Tajikistan',
'Tanzania',
'Thailand',
'Togo',
'Tonga',
'Trinidad and Tobago',
'Tunisia',
'Turkey',
'Turkmenistan',
'Uganda',
'Ukraine',
'United Arab Emirates',
'United Kingdom',
'United States',
'Uruguay',
'Uzbekistan',
'Vanuatu',
'Venezuela',
'Vietnam',
'Yemen',
'Zambia',
'Zimbabwe'
];
function App(): JSX.Element {
return (
<JqxInput
theme="tailwind-blue-dark"
width={200}
height={25}
source={source}
minLength={1}
placeHolder="Enter a Country"
/>
);
}
export default App;Options are props. Keep objects such as the data adapter and the columns stable across renders with useMemo, so the component does not reload them.
Each event is a prop named on plus the event name with a capital first letter. For example, change: This event is triggered when the value is changed.
const handleChange = (event: any): void => {
console.log(event.args);
};
return <JqxInput onChange={handleChange} />;Call methods through a ref. For example, val: Sets or gets the value.
import { useRef } from 'react';
const myInput = useRef<JqxInput>(null);
const onClick = () => {
const value = myInput.current!.val();
console.log(value);
};
return <JqxInput ref={myInput} />;Every component also has setOptions({ … }) and getOptions('name'), to change or read options after the first render.
jQWidgets © 2011-2026. All Rights Reserved.