Input ===== ``Input`` component creates an input element in the sidebar content. It will emit 'change' event that user can subscribe to using ``INKAPI.addEvent``. Example +++++++ .. code-block:: javascript :linenos: import INKAPI from './inkapi.js' INKAPI.ready(async () => { const UI = INKAPI.ui; const sidebarObj = await UI.create({ type: "Sidebar", sidebarTitle: "Personal Sidebar", icon: "./sample.svg", children: [ { type: "Input", id: "myInp", placeholder: "Search here...", styles: { "border-radius": "5px", } }, ], }); console.log(sidebarObj); }); Options +++++++ +--------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | Name | Type | Description | +==============+========================================+=====================================================================================================================================================================================================================================================================================================+ | id? | ``String | Number`` | You can assign a unique id to the component. It will be helpful for listening to events and removing component in future. If ``id`` is not given by user (or if given ``id`` is already associated with a UI component) then an automatically generated id is assigned to the component. | +--------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | type | ``Input`` | This field should be passed ``Input`` as value to create a Input component. This value is case-sensitive. | +--------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | placeholder? | ``String`` | Placeholder value for the input element. | +--------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | styles? | ``Object`` | Custom styles for the element. | +--------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | rootStyles? | ``Object`` | Custom styles for the root wrapper element. | +--------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | clearable? | ``Boolean`` | Enabling this will display clear icon on input which will clear the input value on click. | +--------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ Shadow Methods ++++++++++++++ +----------------+-----------------------------+---------------------------------------------------------------------------------------------------------------------------------+ | Methods | Arguments | Description | +================+=============================+=================================================================================================================================+ | setValue | value: ``String`` | This function is used to set value of the input component. | +----------------+-----------------------------+---------------------------------------------------------------------------------------------------------------------------------+ | getValue | ``none`` | This function is used to get the current value of the input component. | +----------------+-----------------------------+---------------------------------------------------------------------------------------------------------------------------------+ Events ++++++ +-----------------------+---------------------------------------------------------------------------------------------------------------------------------+ | Event Keyword | Description | +=======================+=================================================================================================================================+ | change | This event is triggered when the input value is changed. | +-----------------------+---------------------------------------------------------------------------------------------------------------------------------+ .. note:: To learn more about shadow methods and shadow objects, please refer `here <./custom-ui-intro.html#shadow-ui-objects>`_.