Skip to Content

React Form Widgets Demo

by
Odoo
v 19.0 Third Party 10
Download for v 19.0 Deploy on Odoo.sh Live Preview
Availability
Odoo Online
Odoo.sh
On Premise
Community Apps Dependencies
Lines of code 488
Technical Name sc_react_form_widgets
LicenseOPL-1
Websitehttps://shachain.dev
You bought this module and need support? Click here!
Availability
Odoo Online
Odoo.sh
On Premise
Community Apps Dependencies
Lines of code 488
Technical Name sc_react_form_widgets
LicenseOPL-1
Websitehttps://shachain.dev
Shachain ✉ Email Us
Shachain ✉ Email Us

10 React Form Field Widgets for Odoo

Drop modern UI widgets — QR code, JSON tree, color picker, range slider, date range and more — into any Odoo form view, and learn how to build your own.

▶ Live Preview
Shachain
React-powered addons for Odoo
Acme Corp demo record showing 8 React form widgets in a single Odoo form: Timeline, QR Code, Star Rating, Slider, Range Slider, Angle Slider, PIN Input, Date Range

What it does

Form Field Widgets Demo registers React Web Components as Odoo form field widgets through the bridge's defineAddon API. It ships 10 ready-to-use widgets and serves as a learning resource for building your own.

10 ready-to-use widgets

Widget name Field type Purpose
sc_qr_code char URL or text rendered as a live QR code
sc_json_tree json Editable JSON tree — add, delete, collapse nodes
sc_color_picker char Color picker with hex format and swatches
sc_star_rating integer Star rating, 0-5 with half-star support
sc_slider float / integer Mantine slider with min / max / step
sc_range_slider float / integer Compound range slider — binds a low + high field pair
sc_angle_slider float / integer Rotary angle dial
sc_pin_input char PIN code input — configurable length, optionally masked
sc_date_range date Compound date range picker — binds a start + end field pair
sc_timeline one2many Read-only Mantine Timeline from one2many events
Form Field Widgets Features

Modern inputs bound straight to standard Odoo fields — and a clean API to register widgets of your own.

QR Code, Color & Rating Inputs

Render a QR code from a char field, pick colors with swatches, and capture star ratings — modern inputs bound straight to standard Odoo fields.

JSON Tree Editor

Edit nested JSON visually — add, delete, and collapse nodes — bound to a json field.

Compound Range & Date Widgets

The range slider and date range picker each bind two fields at once — a low/high pair or a start/end pair — with built-in ordering validation.

Angle Dial & PIN Input

A rotary angle dial and a masked PIN code input — specialized widgets for numeric and char fields.

Use in your own models

Drop the widget into any XML form view by name, and register your own widgets via the defineAddon fieldWidgets API.

<field name="brand_color" widget="sc_color_picker"/>
<field name="rating" widget="sc_star_rating" options="{'count': 5}"/>
<field name="access_pin" widget="sc_pin_input" options="{'length': 6}"/>

Below: the actual form view XML from the demo addon — each widget="..." attribute swaps in a React component.

Form view XML editor showing widget attribute usage: sc_timeline, sc_qr_code, sc_star_rating, sc_slider, sc_range_slider, sc_angle_slider, sc_pin_input, sc_date_range

Built on

Powered by React, Mantine v8, and the odoo-react bridge — running natively on Odoo.

Frequently Asked Questions

Sometimes you need a quick answer to your question. You can get it right away here.

General

Do these widgets work with Studio custom fields?
Yes. The widgets attach to standard Odoo fields by the widget="..." attribute in the form view — including fields added by Studio.
Which field types are supported?
Each widget declares its supported Odoo field types — char, integer, float, json, date, and one2many. See the widget table on the Overview tab.
Can I register my own widget?
Yes. Use the defineAddon fieldWidgets API from the bridge — see the addon's react/index.ts as a reference.

Setup & Install

Step 1 — Download the addon
Download the addon zip from this App Store listing to your local machine.
Step 2 — Extract into your addons path
Unzip the package and place the addon folder inside one of the directories listed in your Odoo addons_path (configured in odoo.conf).
Step 3 — Update Apps List
In Odoo, enable developer mode, open Apps, and click Update Apps List so Odoo picks up the newly placed addon.
Step 4 — Install
Search for the addon by name in Apps and click Install. This module depends on the odoo-react bridge — install it first if Odoo reports a missing dependency.
Form Field Widgets Releases

Every update brings new capabilities. Track the latest features and enhancements.

Initial Public Release
🎉
Release 19.0.1.1.0 (May 2026)
  • First public version of the Form Field Widgets demo addon.
  • Ships 10 ready-to-use React form field widgets: QR code, JSON tree, color picker, star rating, slider, range slider, angle slider, PIN input, date range, and timeline.
  • Includes the defineAddon fieldWidgets API for registering your own React-based form widgets. See the Overview tab for the full widget list.

Modernize your Odoo forms

10 widgets · Studio-compatible · Build your own

▶Live Preview ✉Email Us 
Odoo Proprietary License v1.0

This software and associated files (the "Software") may only be used (executed,
modified, executed after modifications) if you have purchased a valid license
from the authors, typically via Odoo Apps, or if you have received a written
agreement from the authors of the Software (see the COPYRIGHT file).

You may develop Odoo modules that use the Software as a library (typically
by depending on it, importing it and using its resources), but without copying
any source code or material from the Software. You may distribute those
modules under the license of your choice, provided that this license is
compatible with the terms of the Odoo Proprietary License (For example:
LGPL, MIT, or proprietary licenses similar to this one).

It is forbidden to publish, distribute, sublicense, or sell copies of the Software
or modified copies of the Software.

The above copyright notice and this permission notice must be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
DEALINGS IN THE SOFTWARE.

Please log in to comment on this module

  • The author can leave a single reply to each comment.
  • This section is meant to ask simple questions or leave a rating. Every report of a problem experienced while using the module should be addressed to the author directly (refer to the following point).
  • If you want to start a discussion with the author, please use the developer contact information. They can usually be found in the description.
Please choose a rating from 1 to 5 for this module.