📄️ Card
The Card component is a styled container for grouping other components together under an optional heading. Use it to visually separate a logical section of a form, such as a summary block or a group of related fields.
📄️ Columns
The Columns component splits a section of your form into side-by-side vertical columns. You drop other components into each column to build multi-column layouts such as a two-column form, a card row with equal-width panels, or a narrow label column alongside a wide input column. The number of columns, their widths, and the spacing between them are all configurable.
📄️ Container
The Container component groups other components together into a single box. It doesn't bind to any data itself - use it purely as a layout wrapper, to arrange child components with flexbox or grid, and to apply a shared border, background, or size to the group as a whole.
📄️ Drawer
The Drawer component allows the opening of a sliding panel from any side of the screen, ideal for temporary form content, quick settings, or auxiliary views. It supports extensive customization around behavior, size, positioning, and content.
📄️ Key Information Bar
The Key Information Bar component displays essential data in a compact, styled row or column format. Great for summaries and quick insights, it supports fully customizable layouts and styling per item.
📄️ Panel
The Panel component helps group and visually segment content inside a form. It acts as a flexible container that can include headers, icons, and conditional logic to show or hide its contents. Panels make forms easier to scan and more organized.
📄️ Section Separator
The Section separator is a line that is used to organize content by dividing it into sections, it provides a structured layout that will make it easier to locate sections.
📄️ SizableColumns
The SizableColumns component splits its area into side-by-side columns that the user can drag to resize at runtime, with a draggable divider between each pair. Use it for layouts where the relative width of two or more columns should be adjustable, rather than fixed.
📄️ Subform
In Shesha, a form is a screen that displays and collects data about one thing - a person, an order, a property. Most real-world records are not just one flat list of fields. A person has an address. An order has a customer. A job has a primary contact. These related pieces of data belong to separate records in your database, but you often want to show and edit them together on the same screen.
📄️ Tabs
The Tabs component is used to organize content into separate sections or panes, where users can switch between these sections by clicking on the tabs. Each tab represents a different section, and only one section is visible at a time.
📄️ Wizard
The Wizard component enables multi-step forms by segmenting fields across several pages with navigation controls. It's ideal for complex data entry processes where progressive disclosure improves the user experience.