docs(user): widget gallery with documentation added

docs/user/widgets/device_input/device_input.md

@@ -0,0 +1,100 @@
+(user.widgets.device_input)=
+
+# Device Input Widgets
+
+````{tab} Overview
+
+The `Device Input Widgets` consist of two primary widgets: `DeviceLineEdit` and `DeviceComboBox`. Both widgets are designed to facilitate the selection of devices within the BEC environment, allowing users to filter, search, and select devices dynamically. These widgets are highly customizable and can be integrated into a GUI either through direct code instantiation or by using `QtDesigner`.
+
+## DeviceLineEdit
+The `DeviceLineEdit` widget provides a line edit interface with autocomplete functionality for device names, making it easier for users to quickly search and select devices.
+
+## DeviceComboBox
+The `DeviceComboBox` widget offers a dropdown interface for device selection, providing a more visual way to browse through available devices.
+
+## Key Features:
+- **Device Filtering**: Both widgets allow users to filter devices by their class names, ensuring that only relevant devices are shown.
+- **Default Device Setting**: Users can set a default device to be pre-selected when the widget is initialized.
+- **Real-Time Autocomplete (LineEdit)**: The `DeviceLineEdit` widget supports real-time autocomplete, helping users find devices faster.
+- **Dropdown Selection (ComboBox)**: The `DeviceComboBox` widget displays devices in a dropdown list, making selection straightforward.
+- **QtDesigner Integration**: Both widgets can be added as custom widgets in `QtDesigner` or instantiated directly in code.
+
+````
+
+````{tab} Examples
+
+Both `DeviceLineEdit` and `DeviceComboBox` can be integrated within a GUI application through direct code instantiation or by using `QtDesigner`. Below are examples demonstrating how to create and use these widgets.
+
+
+## Example 1 - Creating a DeviceLineEdit in Code
+
+In this example, we demonstrate how to create a `DeviceLineEdit` widget in code and customize its behavior.
+
+```python
+from qtpy.QtWidgets import QApplication, QVBoxLayout, QWidget
+from bec_widgets.widgets.device_line_edit import DeviceLineEdit
+
+class MyGui(QWidget):
+    def __init__(self):
+        super().__init__()
+        self.setLayout(QVBoxLayout(self))  # Initialize the layout for the widget
+
+        # Create and add the DeviceLineEdit to the layout
+        self.device_line_edit = DeviceLineEdit(device_filter="Motor")
+        self.layout().addWidget(self.device_line_edit)
+
+# Example of how this custom GUI might be used:
+app = QApplication([])
+my_gui = MyGui()
+my_gui.show()
+app.exec_()
+```
+
+## Example 2 - Creating a DeviceComboBox in Code
+
+Similarly, here is an example of creating a `DeviceComboBox` widget in code and customizing its behavior.
+
+```python
+from qtpy.QtWidgets import QApplication, QVBoxLayout, QWidget
+from bec_widgets.widgets.device_combo_box import DeviceComboBox
+
+class MyGui(QWidget):
+    def __init__(self):
+        super().__init__()
+        self.setLayout(QVBoxLayout(self))  # Initialize the layout for the widget
+
+        # Create and add the DeviceComboBox to the layout
+        self.device_combo_box = DeviceComboBox(device_filter="Motor")
+        self.layout().addWidget(self.device_combo_box)
+
+# Example of how this custom GUI might be used:
+app = QApplication([])
+my_gui = MyGui()
+my_gui.show()
+app.exec_()
+```
+
+## Example 3 - Setting Default Device
+
+Both `DeviceLineEdit` and `DeviceComboBox` allow you to set a default device that will be selected when the widget is initialized.
+
+```python
+# Set default device for DeviceLineEdit
+self.device_line_edit.set_default_device("motor1")
+
+# Set default device for DeviceComboBox
+self.device_combo_box.set_default_device("motor2")
+```
+````
+
+````{tab} API - ComboBox
+```{eval-rst} 
+.. include:: /api_reference/_autosummary/bec_widgets.cli.client.DeviceComboBox.rst
+```
+````
+
+````{tab} API - LineEdit
+```{eval-rst}
+.. include:: /api_reference/_autosummary/bec_widgets.cli.client.DeviceLineEdit.rst
+```
+````