JavaScriptJavaScriptAngularAngularVueVueReactReact

Getting Started with React SwitchButton 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/switchbutton/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 from "react";
import { SwitchButton } from 'smart-webcomponents-react/switchbutton';

const App = () => {

  // If you want to run any init logic, use useEffect here
  React.useEffect(() => {
    // Your code here (replacing init/componentDidMount)
  }, []);

  return (
    <div>
      <p>
        On/off switches toggle the state of a single settings option. The option
        that the switch controls, as well as the state it’s in, should be made
        clear from the corresponding inline label. Switches take on the same visual
        properties of the radio button.
      </p>
      <br />
      <br />
      <SwitchButton checked></SwitchButton>
      <br />
      <br />
      <SwitchButton></SwitchButton>
    </div>
  );
};

export default App;

4 Run the dev server

npm run dev

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

Alternative: Next.js

Create an app with npx create-next-app@latest (Pages Router or App Router). Install the same package (npm install smart-webcomponents-react), then reuse the imports and default export from step 3 in pages/_app.tsx, the App Router root app/layout.tsx, or your top-level layout component so styles and the widget tree load once.

TypeScript Support

Types ship with smart-webcomponents-react. Import the component and prop types:

import type { SwitchButton, SwitchButtonProps } from 'smart-webcomponents-react/switchbutton';

The generated wrappers expose on* callbacks (for example onChange) whose arguments are standard DOM Event values unless the widget typings narrow them further.

Accessibility

The SwitchButton component follows WAI-ARIA best practices:

  • Keyboard navigation - Tab, Arrow keys, Enter, and Escape are supported
  • ARIA roles - Appropriate roles and labels are applied automatically
  • Focus management - Visible focus indicators for keyboard users
  • Screen readers - State changes are announced to assistive technology
  • High contrast - Supports Windows High Contrast Mode and forced colors

For custom labeling, set aria-label or aria-labelledby attributes on the component.

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.