> For the complete documentation index, see [llms.txt](https://docs.openflower.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.openflower.org/build-applications/app-editor/visual-components.md).

# Visual Components

With Version 2.0.0 of OpenFlower there are 56 Components.

These components share a number of [common settings and configurations](/build-applications/app-editor/visual-components/common-component-settings.md).

### Data visualization Components

<table data-column-title-hidden data-view="cards" data-full-width="false"><thead><tr><th>button</th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>Text</td><td></td><td></td><td><a href="/files/8EXpxFB3scCC1hRDoupv">/files/8EXpxFB3scCC1hRDoupv</a></td></tr><tr><td>Table</td><td><a href="/pages/Xpu4ngLa4Un1UwYKTN60">/pages/Xpu4ngLa4Un1UwYKTN60</a></td><td></td><td><a href="/files/JoFSo9erBkKIkKXLZp6q">/files/JoFSo9erBkKIkKXLZp6q</a></td></tr><tr><td>Image</td><td><a href="/pages/TZPcluIkDfyScOOEKk1K">/pages/TZPcluIkDfyScOOEKk1K</a></td><td><a href="/pages/TZPcluIkDfyScOOEKk1K">/pages/TZPcluIkDfyScOOEKk1K</a></td><td><a href="/files/0tyFni9zcOi9V86KLb3D">/files/0tyFni9zcOi9V86KLb3D</a></td></tr><tr><td>List View</td><td><a href="/pages/rgXsXgGrE1SoM0NVJqKg">/pages/rgXsXgGrE1SoM0NVJqKg</a></td><td><a href="/pages/rgXsXgGrE1SoM0NVJqKg">/pages/rgXsXgGrE1SoM0NVJqKg</a></td><td><a href="/files/49I57Ww4hLQb9vraeLnw">/files/49I57Ww4hLQb9vraeLnw</a></td></tr><tr><td>Charts</td><td><a href="/pages/PYyMM1M1LdEXTXMTMQzW">/pages/PYyMM1M1LdEXTXMTMQzW</a></td><td><a href="/pages/PYyMM1M1LdEXTXMTMQzW">/pages/PYyMM1M1LdEXTXMTMQzW</a></td><td><a href="/files/VScBVhtj68MlmAuHlthK">/files/VScBVhtj68MlmAuHlthK</a></td></tr><tr><td>Rating</td><td></td><td></td><td><a href="/files/mwoZxSBNvipb1vZpucoh">/files/mwoZxSBNvipb1vZpucoh</a></td></tr><tr><td>Calendar</td><td><a href="/pages/i0TKmM4JwgVI21dMxZAZ">/pages/i0TKmM4JwgVI21dMxZAZ</a></td><td></td><td><a href="/files/F514WuaX4yorV1hSpKYR">/files/F514WuaX4yorV1hSpKYR</a></td></tr><tr><td>Link</td><td></td><td></td><td><a href="/files/DSNPXeEr53CJNIKgLoF6">/files/DSNPXeEr53CJNIKgLoF6</a></td></tr><tr><td>Progress</td><td></td><td></td><td><a href="/files/RqTdN1O6MwXaFljqYCnu">/files/RqTdN1O6MwXaFljqYCnu</a></td></tr><tr><td>Progress - Circle</td><td></td><td></td><td><a href="/files/ZiAlNwN8vY4Na19R41ME">/files/ZiAlNwN8vY4Na19R41ME</a></td></tr><tr><td>File Viewer</td><td></td><td></td><td><a href="/files/js9JZGDTdGy4y9MM2SZ1">/files/js9JZGDTdGy4y9MM2SZ1</a></td></tr><tr><td>QR Code Display</td><td></td><td></td><td><a href="/files/yBGtNMTzvRlwa4m97q0Z">/files/yBGtNMTzvRlwa4m97q0Z</a></td></tr><tr><td>Json Explorer</td><td></td><td></td><td><a href="/files/8iwqThPMEZsGMisWfLMC">/files/8iwqThPMEZsGMisWfLMC</a></td></tr><tr><td>Tree</td><td></td><td></td><td><a href="/files/SxoZfu5zDQJfjUhVEBkO">/files/SxoZfu5zDQJfjUhVEBkO</a></td></tr><tr><td>Audio</td><td></td><td></td><td><a href="/files/OOU54GLkDjWe0W1X7i1p">/files/OOU54GLkDjWe0W1X7i1p</a></td></tr><tr><td>Video</td><td></td><td></td><td><a href="/files/pvdfWzgaycCJpKfW9XKp">/files/pvdfWzgaycCJpKfW9XKp</a></td></tr><tr><td>Carousel</td><td></td><td></td><td><a href="/files/5HUEtbK9Byuw78T4Rd6S">/files/5HUEtbK9Byuw78T4Rd6S</a></td></tr><tr><td>Iframe</td><td></td><td></td><td><a href="/files/15LS2FXntHtjz9FQbOK4">/files/15LS2FXntHtjz9FQbOK4</a></td></tr></tbody></table>

### Data entry Components

<table data-column-title-hidden data-view="cards"><thead><tr><th>button</th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>Form</td><td></td><td><a href="/files/cbyZc2efDYwAVEVJiBaG">/files/cbyZc2efDYwAVEVJiBaG</a></td></tr><tr><td>Json Schema based Form</td><td></td><td><a href="/files/GMMpP8tLrpS3zgGAmPw7">/files/GMMpP8tLrpS3zgGAmPw7</a></td></tr><tr><td>Rich Text Editor</td><td></td><td><a href="/files/keyllo43sO2lMbCJeKxG">/files/keyllo43sO2lMbCJeKxG</a></td></tr><tr><td>Table</td><td><a href="/pages/Xpu4ngLa4Un1UwYKTN60">/pages/Xpu4ngLa4Un1UwYKTN60</a></td><td><a href="/files/JoFSo9erBkKIkKXLZp6q">/files/JoFSo9erBkKIkKXLZp6q</a></td></tr><tr><td>Input</td><td></td><td><a href="/files/RAeaDJJNxjNC50woY5jk">/files/RAeaDJJNxjNC50woY5jk</a></td></tr><tr><td>Text Area</td><td></td><td><a href="/files/Xmcyx4Sxm9qsQwtFvMgf">/files/Xmcyx4Sxm9qsQwtFvMgf</a></td></tr><tr><td>Password Field</td><td></td><td><a href="/files/n5C9czAv5Lirr4hdBb6Y">/files/n5C9czAv5Lirr4hdBb6Y</a></td></tr><tr><td>Number Input Field</td><td></td><td><a href="/files/7iQKEb1WEopbZFH3bal2">/files/7iQKEb1WEopbZFH3bal2</a></td></tr><tr><td>Select Field</td><td></td><td><a href="/files/F2vXAlVDTOqdA9Z918nQ">/files/F2vXAlVDTOqdA9Z918nQ</a></td></tr><tr><td>Multi Select Field</td><td></td><td><a href="/files/2cQKjavZnPH3a9Uvkhy5">/files/2cQKjavZnPH3a9Uvkhy5</a></td></tr><tr><td>Tree Select</td><td></td><td><a href="/files/DinV0KCXSksmshAMBMOx">/files/DinV0KCXSksmshAMBMOx</a></td></tr><tr><td>Cascader</td><td></td><td><a href="/files/LPnZebYQgaOYzxGG25X0">/files/LPnZebYQgaOYzxGG25X0</a></td></tr><tr><td>Slider</td><td></td><td><a href="/files/xzTEVmdZFWEBFYe63OTa">/files/xzTEVmdZFWEBFYe63OTa</a></td></tr><tr><td>Range Slider</td><td></td><td><a href="/files/VqOoBMGH61A4xWkGXV8u">/files/VqOoBMGH61A4xWkGXV8u</a></td></tr><tr><td>Segmented Control</td><td></td><td><a href="/files/uvvlVnKwENTE59PZhgnu">/files/uvvlVnKwENTE59PZhgnu</a></td></tr><tr><td>Dropdown</td><td></td><td><a href="/files/OkXspLRC3ws57bbcx0sa">/files/OkXspLRC3ws57bbcx0sa</a></td></tr><tr><td>Switch</td><td></td><td><a href="/files/T4jSmVrghF5gTR8nMY1e">/files/T4jSmVrghF5gTR8nMY1e</a></td></tr><tr><td>Checkbox Field</td><td></td><td><a href="/files/8vU7Zc6IhEtsBH48ucz7">/files/8vU7Zc6IhEtsBH48ucz7</a></td></tr><tr><td>Radio Buttons</td><td></td><td><a href="/files/eEMsaOJ9DWfSKGvrnE84">/files/eEMsaOJ9DWfSKGvrnE84</a></td></tr><tr><td>Rating</td><td></td><td><a href="/files/mwoZxSBNvipb1vZpucoh">/files/mwoZxSBNvipb1vZpucoh</a></td></tr><tr><td>Navigation</td><td></td><td><a href="/files/Rt7ddmuEu6jzgXdHTJWL">/files/Rt7ddmuEu6jzgXdHTJWL</a></td></tr><tr><td>File Upload</td><td><a href="/pages/pvvlTFOaKhoPSJDnZWdG">/pages/pvvlTFOaKhoPSJDnZWdG</a></td><td><a href="/files/brptLZKzBmBgfUtvmvmY">/files/brptLZKzBmBgfUtvmvmY</a></td></tr><tr><td>QR &#x26; 1D Code Scanner</td><td></td><td><a href="/files/vNld0IOAYcHPdlwlX3Sw">/files/vNld0IOAYcHPdlwlX3Sw</a></td></tr><tr><td>Signature Input Field</td><td></td><td><a href="/files/y9SHqYCEY1m6Zk8xTvK4">/files/y9SHqYCEY1m6Zk8xTvK4</a></td></tr><tr><td>Calendar</td><td></td><td><a href="/files/F514WuaX4yorV1hSpKYR">/files/F514WuaX4yorV1hSpKYR</a></td></tr><tr><td>Date Input Field</td><td></td><td><a href="/files/IV9vPChe6wzxyonHq8q9">/files/IV9vPChe6wzxyonHq8q9</a></td></tr><tr><td>Date Range Input Field</td><td></td><td><a href="/files/SHr3PLqkXjMBucgJoy3r">/files/SHr3PLqkXjMBucgJoy3r</a></td></tr><tr><td>Time Input Field</td><td></td><td><a href="/files/DKSOCKSjmbI6x9zkAX6u">/files/DKSOCKSjmbI6x9zkAX6u</a></td></tr><tr><td>Time Range Input Field</td><td></td><td><a href="/files/GhXnozcVZmKn2RSllWbW">/files/GhXnozcVZmKn2RSllWbW</a></td></tr><tr><td>Json Editor</td><td></td><td><a href="/files/pt5TjiHd6FdYikNKhclU">/files/pt5TjiHd6FdYikNKhclU</a></td></tr><tr><td>Image Editor</td><td></td><td><a href="/files/pTdkCfdII1ZTxdWaolWp">/files/pTdkCfdII1ZTxdWaolWp</a></td></tr></tbody></table>

### Layout Components

<table data-column-title-hidden data-view="cards"><thead><tr><th>button</th><th data-hidden data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Container</td><td></td><td><a href="/files/clooK9QQxb8rGX2xoTbd">/files/clooK9QQxb8rGX2xoTbd</a></td><td></td></tr><tr><td>Tabbed Container</td><td></td><td><a href="/files/bNE3pQzqcx6G6iLuT0Yr">/files/bNE3pQzqcx6G6iLuT0Yr</a></td><td></td></tr><tr><td>Modal</td><td></td><td><a href="/files/yJw8HsUWN6RNVFaCnn1I">/files/yJw8HsUWN6RNVFaCnn1I</a></td><td></td></tr><tr><td>List View</td><td><a href="/pages/rgXsXgGrE1SoM0NVJqKg">/pages/rgXsXgGrE1SoM0NVJqKg</a></td><td><a href="/files/49I57Ww4hLQb9vraeLnw">/files/49I57Ww4hLQb9vraeLnw</a></td><td><a href="/pages/rgXsXgGrE1SoM0NVJqKg">/pages/rgXsXgGrE1SoM0NVJqKg</a></td></tr><tr><td>Toggle Button</td><td></td><td><a href="/files/NKMFs0uwnratvgGKHULO">/files/NKMFs0uwnratvgGKHULO</a></td><td></td></tr><tr><td>Divider</td><td></td><td><a href="/files/7dc35DbNQrvf3Kec4QeL">/files/7dc35DbNQrvf3Kec4QeL</a></td><td></td></tr><tr><td>Grid</td><td></td><td><a href="/files/q3Ivx8y4EnCVhMJ4LBoR">/files/q3Ivx8y4EnCVhMJ4LBoR</a></td><td><a href="/pages/rgXsXgGrE1SoM0NVJqKg">/pages/rgXsXgGrE1SoM0NVJqKg</a></td></tr><tr><td>Drawer</td><td><a href="/pages/xSf9tPeIDZ4AY0qS2nqo">/pages/xSf9tPeIDZ4AY0qS2nqo</a></td><td><a href="/files/Eb2JhIYXyfURd1xkwFcB">/files/Eb2JhIYXyfURd1xkwFcB</a></td><td></td></tr><tr><td>Collapsible Container</td><td></td><td><a href="/files/16X8dXGv9LOqndhetehO">/files/16X8dXGv9LOqndhetehO</a></td><td></td></tr></tbody></table>

### Special Components

<table data-column-title-hidden data-view="cards"><thead><tr><th>button</th><th data-hidden data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Json Editor</td><td></td><td><a href="/files/pt5TjiHd6FdYikNKhclU">/files/pt5TjiHd6FdYikNKhclU</a></td><td></td></tr><tr><td>Json Explorer</td><td></td><td><a href="/files/8iwqThPMEZsGMisWfLMC">/files/8iwqThPMEZsGMisWfLMC</a></td><td></td></tr><tr><td>Json Schema based Form</td><td></td><td><a href="/files/GMMpP8tLrpS3zgGAmPw7">/files/GMMpP8tLrpS3zgGAmPw7</a></td><td></td></tr><tr><td>QR Code Display</td><td></td><td><a href="/files/yBGtNMTzvRlwa4m97q0Z">/files/yBGtNMTzvRlwa4m97q0Z</a></td><td></td></tr><tr><td>QR &#x26; 1D Code Scanner</td><td></td><td><a href="/files/vNld0IOAYcHPdlwlX3Sw">/files/vNld0IOAYcHPdlwlX3Sw</a></td><td></td></tr><tr><td>Signature Input Field</td><td></td><td><a href="/files/y9SHqYCEY1m6Zk8xTvK4">/files/y9SHqYCEY1m6Zk8xTvK4</a></td><td></td></tr><tr><td>File Viewer</td><td></td><td><a href="/files/js9JZGDTdGy4y9MM2SZ1">/files/js9JZGDTdGy4y9MM2SZ1</a></td><td></td></tr><tr><td>Tree</td><td></td><td><a href="/files/SxoZfu5zDQJfjUhVEBkO">/files/SxoZfu5zDQJfjUhVEBkO</a></td><td></td></tr><tr><td>Calendar</td><td></td><td><a href="/files/F514WuaX4yorV1hSpKYR">/files/F514WuaX4yorV1hSpKYR</a></td><td><a href="/pages/i0TKmM4JwgVI21dMxZAZ">/pages/i0TKmM4JwgVI21dMxZAZ</a></td></tr><tr><td>Image Editor</td><td></td><td><a href="/files/pTdkCfdII1ZTxdWaolWp">/files/pTdkCfdII1ZTxdWaolWp</a></td><td></td></tr><tr><td>Iframe</td><td></td><td><a href="/files/15LS2FXntHtjz9FQbOK4">/files/15LS2FXntHtjz9FQbOK4</a></td><td></td></tr></tbody></table>

### Extensible Components

<table data-column-title-hidden data-view="cards"><thead><tr><th>button</th><th data-hidden data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Chart / EChart</td><td><a href="/pages/PYyMM1M1LdEXTXMTMQzW">/pages/PYyMM1M1LdEXTXMTMQzW</a></td><td><a href="/files/VScBVhtj68MlmAuHlthK">/files/VScBVhtj68MlmAuHlthK</a></td><td><a href="/pages/PYyMM1M1LdEXTXMTMQzW">/pages/PYyMM1M1LdEXTXMTMQzW</a></td></tr><tr><td>Json Schema Form</td><td></td><td><a href="/files/GMMpP8tLrpS3zgGAmPw7">/files/GMMpP8tLrpS3zgGAmPw7</a></td><td></td></tr><tr><td>Custom Component</td><td></td><td><a href="/files/7dlDa16OIOiShEMOCBuM">/files/7dlDa16OIOiShEMOCBuM</a></td><td><a href="/pages/fN9nXBvesByaTI73YjJr">/pages/fN9nXBvesByaTI73YjJr</a></td></tr></tbody></table>
