What is Kintone UI Component?
Kintone UI Component is a library that allows Kintone developers to easily create Kintone-like user interfaces. It can be used to create form components for Kintone customizations or plug-in development.
This article introduces the features of Kintone UI Component v1.
v1 is available for both desktop and mobile development. Check the Components section in the documentation for supported components.
The release notes introduce the background of the v1 release and the contents of the update.
Support policy for Kintone UI Component (v1 and later)
- Questions and feature requests may be posted as a Github Issue.
- The source code may be changed, redistributed, and used for commercial use under the terms of the license. Check the GitHub repository for the license type.
Refer to the Quick Start in the documentation for details on installation.
For developers looking for information on v0, refer to the article, Create form elements with Kintone UI Component v0. For information on migrating from v0 to v1, refer to A commentary on the difference between v0 and v1 from the official documentation.
This section will introduce a number of features in Kintone UI Component v1.
Desktop and mobile-specific UI components
Kintone UI Component allows the simple creation of components with either the Kintone desktop or mobile design. This section will introduce the desktop button and mobile checkbox designs.
Desktop Button (Kuc.Button)
The created button with the text sample is shown below.
Mobile Checkbox (Kuc.MobileCheckbox)
The created Fruit checkbox with options orange and apple is shown below.
Easily reproduced Kintone components
Each component of Kintone UI Component reliably reproduces the UI and behavior of its standard Kintone fields. A dropdown and text area field created with Kintone UI Component is compared with the standard Kintone fields below.
Kintone UI Component
Standard Kintone field
Mobile Text Area
Field settings such as making the field required or setting default text is also possible with Kintone UI Component.
Specifying class names and IDs
Class names and IDs of each component can be specified. Detailed customizations and style changes can then be applied to each component.
Accessibility such as keyboard compatibility and text to speech is supported. Settings differ depending on the OS.
- IE11 is not supported.
For details, check the Browser support status information from the official documentation.
Check the developer pages below for update history and the latest information on new features.
- GitHub Releases: https://github.com/kintone-labs/kintone-ui-component/releases
- Release Notes: https://kintone-ui-component.netlify.app/docs/en/releases/release-notes
With Kintone UI Component, it is easy to create Kintone-like UIs for customizations that would have previously been time-consuming. Kintone UI Component is especially popular for recreating buttons and dropdowns, but can be used to create entire plug-in pages and other UI-intensive customizations.
This article was tested with the January 2021 edition of Kintone, and Kintone UI Component version 1.0.0.