UI components
To give your front end a wide range of visual possibilities, the Genesis low-code platform provides a wide range of Web Components. These are built on top of Microsoft FAST.
This eliminates a number of problems, such as deciding between Angular, React & Vue, dealing with version clashes & upgrades, or needing to onboard web-framework specialists.
You can use these Web Components to create clear and usable interfaces quickly.
| Name | Category | Description |
|---|---|---|
| Button | Form | Enables users to trigger actions, such as submitting a form or opening a dialog |
| Checkbox | Form | An implementation of a checkbox as a form-connected Web Component |
| Combobox | Form | A combobox is an input with an associated pop-up that enables users to select a value from a collection of possible values (auto-complete) |
| Number field | Form | A text field for numeric entry |
| Option | Form | An implementation of an option |
| Picker | Form | A selection input with support for selection of multiple options |
| Radio | Form | An implementation of a radio as a form-connected Web Component |
| Radio group | Form | A set of radio buttons where no more than one of the buttons can be checked at a time |
| Select | Form | An implementation of an HTML select element as a form-connected Web Component |
| Slider | Form | An implementation of a range slider as a form-connected Web Component |
| Switch | Form | An implementation of a switch as a form-connected Web Component |
| Text area | Form | An implementation of an HTML textarea element as a form-connected Web Component |
| Text field | Form | An implementation of a text field as a form-connected Web Component |
| Toolbar | Form | Container for grouping a set of controls, such as buttons, menubuttons, or checkboxes |
| Accordion | Interaction | A vertically stacked set of interactive headings representing a section of content |
| Anchor | Interaction | A piece of text that marks the beginning and/or the end of a hypertext link |
| Anchored region | Interaction | A container component that enables you to create layouts where the contents of the anchored region can be positioned relative to another anchor element |
| Dialog | Interaction | Component presenting content to the user |
| Flipper | Interaction | Used to page through blocks of content or collections of UI elements |
| Listbox | Interaction | A component displaying an enumerated set of items |
| Menu | Interaction | A widget that offers a list of choices to the user |
| Modal | Interaction | An alternative to the dialog component which will prevent the user from interacting with other content on the page |
| Tabs | Interaction | A set of layered sections of content that display one panel of content at a time |
| Tooltip | Interaction | Provides extra information about another element when the user hovers over it |
| Tree view | Interaction | Component presenting a hierarchical list |
| Avatar | Presentation | Used to graphically represent a user or an object |
| Badge | Presentation | Used to highlight an item and attract attention or flag its status |
| Breadcrumb | Presentation | A list of links to the parent pages of the current page in hierarchical order |
| Card | Presentation | A visual container without semantics, which takes children |
| Disclosure | Presentation | A button that controls the visibility of a section of content |
| Divider | Presentation | A horizontal rule for dividing page elements |
| Horizontal scroll | Presentation | Provides horizontally-scrollable content |
| Progress ring | Presentation | Used to display the length of time a process will take |
| Progress | Presentation | Used to display the length of time a process will take |
| Skeleton | Presentation | Used as a visual placeholder for an element while it is in a loading state |
| Grid Pro | Visualisation | A feature-rich high-performance data grid optimised for real-time, fast-moving data |
| Data grid | Visualisation | A lightweight grid for static or infrequently-changing data |