--- title: "Using UIKit Block Elements" slug: "using-uikit-block-elements" updated: 2024-10-04T18:25:07Z published: 2024-10-04T18:25:07Z canonical: "developer.rocket.chat/using-uikit-block-elements" --- > ## Documentation Index > Fetch the complete documentation index at: https://developer.rocket.chat/llms.txt > Use this file to discover all available pages before exploring further. # Using UIKit Block Elements In the previous document, we went through examples of how to use UI blocks. Here, we will look at some examples of using block elements. Block elements are defined inside blocks. In the following examples, the UI elements will be triggered when a message is followed and unfollowed. ## Add a radio button element The main app class looks like this: ```typescript import {    IAppAccessors,    IHttp,    ILogger,    IMessageUpdater,    IModify,    IPersistence,    IRead, } from '@rocket.chat/apps-engine/definition/accessors'; import { App } from '@rocket.chat/apps-engine/definition/App'; import { IMessage, IMessageFollowContext, IPostMessageFollowed } from '@rocket.chat/apps-engine/definition/messages'; import { IAppInfo } from '@rocket.chat/apps-engine/definition/metadata'; export class SampleAppApp extends App implements IPostMessageFollowed {    async executePostMessageFollowed(context: IMessageFollowContext, read: IRead, http: IHttp, persistence: IPersistence, modify: IModify): Promise {        const messageCreator = modify.getCreator().startMessage();        const appId = this.getID();        messageCreator.setBlocks([            {                type: 'section', // we have added a section block to give a heading to the radio buttons                text: {                    type: 'plain_text',                    text: 'Select a radio button option:'                }            },            {                type: 'actions', // the action block contains the radio button definition                appId: appId,                blockId: 'action_block_1',                elements: [                    {                        type: 'radio_button',                        actionId: 'radio_button_action_1',                        appId: appId,                        blockId: 'radio_button_action_block_1',                        options: [                            {                                text: {                                    type: 'plain_text',                                    text: 'Option 1',                                },                                value: 'option_1',                            },                            {                                text: {                                    type: 'plain_text',                                    text: 'Option 2',                                },                                value: 'option_2'                            }                        ]                    },                ]            }        ])                messageCreator.setRoom(context.message.room);        await modify.getCreator().finish(messageCreator);    } } ``` In the workspace, the following screenshot shows the response returned by the sample app bot when a message is followed: ![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/Screenshot 2024-09-30 175004.png) ## Add an overflow menu To this example, we will now add an overflow menu element after the radio buttons. Add the following definition to the `messageCreator.setBlocks` parameter. ```typescript {  type: 'section', // the section block which contains the overflow menu block element  blockId: 'section_2',  text: {     type: 'plain_text',     text: 'Overflow menu', // the text displayed for the section block   },  accessory: { // the accessory parameter contains the overflow menu definition     type: 'overflow',     actionId: 'overflow_1',     appId: appId,     blockId: 'overflow_menu_block',     options: [{            value: 'option_1',            text: {                        type: 'plain_text',                        text: 'This is the first option',                        emoji: true,                    }},                   {            value: 'option_2',            text: {                          type: 'plain_text',                          text: 'This is the second option',                          emoji: true, }}]}}, ``` The following screenshot shows how the overflow menu is displayed in the UI: ![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(109).png) ## Add a plain text input element To this example, we will add a plain text input element contained in an input block. Add the following code to the `messageCreator.setBlocks` parameter: ```typescript {  type: 'input', // the input block  label:{ // a label for the input block    type: 'plain_text',    text: 'Plain text input'  },  element: { // the definition of the plain text input element    type: 'plain_text_input',    appId: appId,    actionId: 'plain_text_input_action_1',    blockId: 'plain_text_input_block_1',    placeholder: {       type: 'plain_text',       text: 'Enter the text input here'  },  multiline: false }}, ``` The following screenshot shows the plain text input in the UI: ![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(110).png) ## Add a linear scale element A linear scale element is defined in an action block. Add the following code to the `messageCreator.setBlocks` parameter: ```typescript {  type: 'actions', // the action block  appId: appId,  blockId: 'action_block_3',  elements: [{ // the definition of the linear scale element      type: 'linear_scale',      actionId: 'linear_scale_action_1',      appId: appId,      blockId: 'linear_scale_action_block_1',      minValue: 0,      maxValue: 10,      initialValue: 0,      preLabel: {          type: 'plain_text',          text: 'Min value'       },      postLabel: {          type: 'plain_text',          text: 'Max value' }}]}, ``` The following screenshot shows how the linear scale element looks like in the workspace: ![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(111).png) ## Add a checkbox element A checkbox element is defined in an action block. Add the following code to the `messageCreator.setBlocks` parameter: ```typescript {   type: 'section', // the section block - adds a text heading to the checkbox action block   text: {      type: 'plain_text',      text: 'Select a checkbox option:' }}, {   type: 'actions', // the action block contains the checkbox element definition   appId: appId,   blockId: 'action_block_4',   elements: [{       type: 'checkbox',       actionId: 'checkbox_action_1',       appId: appId,       blockId: 'checkbox_action_block_1',       options: [{           text: {              type: 'plain_text',              text: 'Option 1'                 },           value: 'option_1',            },     {           text: {              type: 'plain_text',              text: 'Option 2',            },           value: 'option_2' }]}]}, ``` The following screenshot shows the checkbox element displayed on the UI: ![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(112).png) ## Add date picker and time picker elements Add the following code to the `messageCreator.setBlocks` parameter: ```typescript {   type: 'actions', // the action block   blockId: 'action_block_5',   elements: [ // the elements parameter contains the date picker block element definition   {       type: 'datepicker',       appId: appId,       blockId: 'date_block_1',       actionId: 'date_action_1',   }]}, {   type: 'actions', // another action block that contains the time picker element definition   appId: appId,   blockId: 'action_block_6',   elements: [{         type: 'time_picker',         actionId: 'time_picker_action_1',         appId: appId,         blockId: 'time_picker_action_block_1', }]}, ``` The following screenshot shows what the date picker element looks like on the UI: ![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(113).png) The following screenshot shows the time picker element: ![](https://cdn.us.document360.io/27ca1fd4-36d7-4cde-b4eb-97fc1652954c/Images/Documentation/image(114).png)