Getting Started with React Form Component

Smart UI React targets React 18+ and current Node LTS for tooling; use TypeScript templates when you want typed props and events.

Demo source (Smart UI repo): react/source/form/overview/App.jsx

1 Create a Vite + React + TypeScript app

1. npm create vite@latest my-smart-app -- --template react-ts

2. cd my-smart-app

   then

   npm install

2 Install Smart UI for React

npm install smart-webcomponents-react

3 Import styles and render the component

Open src/App.tsx (or App.jsx if you chose JavaScript). The snippet below matches Smart UI React demos for this widget:

import 'smart-webcomponents-react/source/styles/smart.default.css';
import React from "react";
import ReactDOM from 'react-dom/client';
import { Form, FormGroup, FormControl } from 'smart-webcomponents-react/form';
import { Input } from 'smart-webcomponents-react/input';
import { NumericTextBox } from  'smart-webcomponents-react/numerictextbox';
import { MaskedTextBox } from  'smart-webcomponents-react/maskedtextbox';
import { Button } from  'smart-webcomponents-react/button';
import 'smart-webcomponents-react/source/modules/smart.form';

class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = {log: ""};
	}

	onValueChanges(value) {
		this.setState({ log: JSON.stringify(value) });
	}
	
	componentDidMount() {
	   // Create a Reactive Form.
		const form = new window.Smart.Form('#profileForm', {
			firstName: ['', {
				validationRules: [{
						type: 'required',
						message: 'First Name is required'
					},
					{
						type: 'stringLength',
						min: 2,
						message: 'First Name requires minimum 2 characters'
					}
				]
			}],
			lastName: ['', {
				validationRules: [{
					type: 'required',
					message: 'Last Name is required'
				}]
			}],
			address: new Smart.FormGroup({
				street: ['', {
					validationRules: [{
						type: 'required',
						message: 'Street is required'
					}]
				}],
				city: [''],
				state: [''],
				zip: ['']
			})
		});

		// set form's value.
		form.value = {
			firstName: 'Peter',
			lastName: 'Smith',
			address: {
				street: '507 - 20th Ave. E. Apt. 2A',
				city: 'Seattle',
				state: 'WA',
				zip: '98122'
			}
		}
		
		form.onValueChanges = this.onValueChanges.bind(this);
	}

	render() {
		return (
			<div>
				<div className="demo-description">This example shows how to create a Reactive Form with Validation.</div>
				<form id="profileForm">
					<div className="smart-form-row">
						<label>First Name:</label>
						<input className="smart-input underlined" form-control-name="firstName"></input>
					</div>
					<div className="smart-form-row">
						<label>Last Name:</label>
						<input className="smart-input underlined" form-control-name="lastName"></input>
					</div>
					<div className="smart-form-row" form-group-name="address">
						 <h3>Address</h3>
						<div className="smart-form-row">
							<label>Street:</label>
							<input className="smart-input underlined" form-control-name="street"></input>
						</div>
						<div className="smart-form-row">
							<label>City:</label>
							<input className="smart-input underlined" form-control-name="city"></input>
						</div>
						<div className="smart-form-row">
							<label>State:</label>
							<input className="smart-input underlined" form-control-name="state"></input>
						</div>
						<div className="smart-form-row">
							<label>Zip Code:</label>
							<input className="smart-input underlined" form-control-name="zip"></input>
						</div>
					</div>
					<div className="smart-form-row submit">
						<Button className="success" form-control-name="submit" type="submit">Submit</Button>
					</div>
				</form>
				<h3>Form Value:</h3>
				<div>{this.state.log}</div>
			</div>
		);
	}
}



export default App;

4 Run the dev server

npm run dev

Open the URL Vite prints (often http://localhost:5173/).

import type { Form, FormProps } from 'smart-webcomponents-react/form';

Live demos

Supported stacks: Smart UI targets Angular 17+, React 18+, Vue 3+, Node 18 LTS, and evergreen browsers; pin exact package versions to your org policy.