Getting Started with React Input 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/input/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 './App.css';
import React, { useRef } from "react";
import { Input } from 'smart-webcomponents-react/input';
import { RadioButton } from 'smart-webcomponents-react/radiobutton';

const App = () => {
  const inputRef = useRef(null);

  const handleDefault = (event) => {
    if (!event.detail.value) {
      return;
    }
    inputRef.current.nativeElement.classList.remove('underlined');
    inputRef.current.nativeElement.classList.remove('outlined');
  };

  const handleOutlined = (event) => {
    if (!event.detail.value) {
      return;
    }
    inputRef.current.nativeElement.classList.remove('underlined');
    inputRef.current.nativeElement.classList.add('outlined');
  };

  const handleUnderlined = (event) => {
    if (!event.detail.value) {
      return;
    }
    inputRef.current.nativeElement.classList.add('underlined');
    inputRef.current.nativeElement.classList.remove('outlined');
  };

  return (
    <div>
      <div className="demo-description">
        <p>
          <b>Smart.Input</b> is a simple input that can have a predefined options list.
        </p>
        <p>
          <b>RenderMode</b> radio buttons allow to change the appearance of the input.
        </p>
      </div>
      <Input ref={inputRef} placeholder="Empty"></Input>
      <div className="options">
        <div className="option">
          <div className="description">Render Mode</div>
          <RadioButton onChange={handleDefault} checked>Default</RadioButton>
          <RadioButton onChange={handleOutlined}>Outlined</RadioButton>
          <RadioButton onChange={handleUnderlined}>Underlined</RadioButton>
        </div>
      </div>
    </div>
  );
};

export default App;

4 Run the dev server

npm run dev

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

import type { Input, InputProps } from 'smart-webcomponents-react/input';

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.