SvGrid UI Components Tips and Tricks: Svelte 5 Buttons, Inputs, Tree, Forms
Practical tips for the SvGrid UI component kit - SvButton states, a Cmd+K command palette, a virtualized searchable tree, schema-driven forms, a parsing date/time field, and the shared field contract - each with a code snippet.
SvGrid ships more than a grid: a Svelte 5-native UI component kit - buttons, inputs, overlays, a tree, forms, a command palette and date/time pickers - that you can use standalone or as grid cell editors. These tips show the parts people most often miss, each a copy-ready one-liner. This page grows over time, so bookmark it.
SvButton has states baked in
Set loading and the button shows a spinner and goes disabled, so async actions cannot double-fire. href renders an anchor that still looks like a button.
<SvButton variant="danger" {loading} onclick={remove}>Delete</SvButton>
Add a Cmd+K palette in one component
The hotkey is configurable (mod+k, mod+p, or off) and the open state is bindable, so you can also trigger it from a button.
<SvCommand bind:open {commands} hotkey="mod+k" onRun={run} />
SvTree scales to big hierarchies
Turn on virtual with a height to window the rows, searchable for the filter box, and loadChildren to fetch a lazy branch the first time it opens.
<SvTree {nodes} checkable searchable virtual height={480} />
Generate a form from a fields schema
Describe each field once (type, label, validation) and SvForm renders the inputs, wires validation, and lays them out across columns.
<SvForm {fields} initial={row} columns={2} onSubmit={save} />
A date/time field that actually parses
It commits on Enter/blur and cancels on Escape, so it drops straight into a grid cell or a form. formatString controls both display and parsing.
<SvDateTimePicker bind:value min={today} hourFormat="24-hour" />
Every input shares one field contract
Inputs share a common editor-props layer, so a11y wiring, validation display and right-to-left mirroring are consistent instead of per-component guesswork.
<SvMultiSelect {options} bind:value label="Tags" required hint="Pick a few" />
SvTabs does closable, positionable tabs
Drive it from a tabs array and bind:value. onClose gives you closable tabs, and orientation/tabPosition cover side rails and bottom bars.
<SvTabs {tabs} bind:value onClose={close} tabPosition="left" />
Build a wizard with SvStepper
Pass the steps, bind:current, and set linear to enforce order. Horizontal or vertical, it is the backbone of any onboarding or checkout flow.
<SvStepper {steps} bind:current linear />
SvDrawer for slide-in panels
Bind open, pick a side and size, and it handles the overlay, scroll lock and dismissal. It is also what the grid uses for its card detail drawer.
<SvDrawer bind:open side="right" title="Details">{content}</SvDrawer>
SvNumberInput knows about numbers
Set precision and grouping and it formats as the user types; min/max/step keep the value valid. No regex-in-an-input gymnastics.
<SvNumberInput bind:value min={0} step={0.5} precision={2} prefix="$" grouping />
Pick from a hierarchy with SvTreeSelect
Feed it the same nodes shape as SvTree, bind:value, and turn on showPath to render breadcrumbs for the selected node.
<SvTreeSelect {nodes} bind:value showPath />
SvGridSelect is a dropdown with columns
Define columns and options, point labelField/idField at the record, and users choose from a tabular list instead of a flat one.
<SvGridSelect {columns} {options} idField="id" labelField="name" bind:value />
SvTooltip wraps any element
Wrap the trigger, set text and a placement, and it handles positioning, timing and ARIA wiring for you.
<SvTooltip text="Archive" placement="top"><button>Archive</button></SvTooltip>
Explore the kit
Every tip links to its component docs. Browse the full UI components reference or see them live in the examples gallery. The same components double as in-cell editors inside SvGrid, the Svelte 5 data grid.