Enode UI components examples

Enode

A table listing vehicle brands with their category, status (Enabled/Disabled), and an action button to toggle their state.

• Table

Enode

A dropdown menu for switching workspaces and managing account settings. It includes a trigger button showing the current workspace, and a popover menu with links to the dashboard, clients, and user profile with logout and settings actions.

• Dropdown menu

Enode

A small informational card indicating a feature is in beta, with a button to provide feedback.

• Alert

Enode

A horizontal row containing a text label and a toggle switch control in its off state.

• Toggle/Switch

Enode

A form field row for setting a maximum range, featuring a label, helper text, and a numeric input field with a 'km' unit suffix.

• Input text

Enode

A form row containing a label on the left and a select dropdown on the right, currently showing 'UNPLUGGED'.

• Input select

Enode

A number input field with a label on the left and minus/plus stepper buttons on the right, displaying a percentage value.

• Input number

Enode

A dropdown menu showing actions for a specific item, triggered by an ellipsis icon next to an Edit button.

• Dropdown menu

Enode

An expanded dropdown menu for selecting a vehicle vendor, showing a list of car models with the first option selected.

• Dropdown menu

Enode

A file upload component specifically designed for uploading a display logo. It includes a placeholder image area, an upload button, and helper text explaining the requirements and purpose of the image.

• File upload input

Enode

A vertical sidebar navigation menu with an expanded section and a selected item.

• Vertical navigation

Enode

A read-only input field displaying a generated client secret with a copy icon, followed by a success alert confirming generation and advising secure storage.

• Alert