Property grid
Aligns editable labels, values, units, and hints in an inspector.
Preview
km
In action
km
When to use
Use it for
- Inspector panels and dense settings with mixed field types.
Not for
- Read-only facts; use DescriptionList.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { PropertyGrid } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/property-grid.
2. Vendor the source
npx @noorddev/vlak-cli add property-grid
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/property-grid.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { PropertyGrid } from "@noorddev/vlak-react";
<PropertyGrid defaultValue={{ name: "Drive", range: 386, enabled: true }} fields={[{ id: "name", label: "Name" }, { id: "range", label: "Range", type: "number", unit: "km", min: 0 }, { id: "enabled", label: "Connected", type: "switch" }]} />Props
PropertyGrid
Editable property rows with shared label/value/unit alignment.
| Prop | Type | Default | Description |
|---|---|---|---|
fieldsrequired | PropertyField[] | ||
value | PropertyValues | ||
defaultValue | PropertyValues | {} | |
onValueChange | (values: PropertyValues) => void | ||
label | string | "Properties" |
Also accepts Omit<HTMLAttributes<HTMLDivElement>, "defaultValue">.
Keyboard
| Keys | Does |
|---|---|
| Tab, native field keys, Space | Native text/number/select fields keep their editing keys; Space toggles a switch. |
Accessibility
- Each row labels its actual control and associates its hint. Native numeric constraints remain available to forms.
Markup
<div class="rs-property-grid" role="group" aria-label="Properties"><div class="rs-property-grid-row"><label class="rs-property-grid-label" for="property-name">Name</label><div class="rs-property-grid-control"><input class="rs-input" id="property-name" value="Drive" /></div></div></div>
Classes
.rs-property-grid.rs-property-grid-row.rs-property-grid-label.rs-property-grid-control.rs-property-grid-note