Properties
The property grid is the panel every designer and settings screen needs: whatever is selected, its properties in categories, each with the right editor — text, numbers with units and limits, a slider, a switch, a list of choices, flags, dates and times, a colour, nested objects and lists you add to and remove from.
Select several objects and edit them together: properties they share show one value, and ones that differ say so. Values are checked as they are typed — required, ranges, patterns and your own rules — and your page can refuse a change. Reset, undo and redo, search, categories or A to Z, a description of the focused property, editors of your own, and a grid that is read entirely from the keyboard and by screen readers.
Designing a form
Click a field on the form to edit it; Ctrl-click (⌘-click on a Mac) to add more and edit them together. The form follows each change.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-property-grid id="pg-form" label="Field properties" style="--bmx-property-grid-height: 30rem"></bmx-property-grid>
Rules, refusals and undo
A server's settings. The port must be a number from 1 to 65,535, and this page refuses anything below 1,024 itself. The host is required and checked against a pattern, timeouts sit in a group of their own, and the allowed origins are a list. Change things, then undo and redo them, or check the lot.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-property-grid id="pg-server" label="Server settings" show-advanced style="inline-size: min(100%, 40rem); --bmx-property-grid-height: 28rem"></bmx-property-grid>
Editors of your own
A card's look. Two properties use editors this page writes itself — a row of brand colours and a picker for where the badge sits — and still go through the grid's checks, events and undo like any other.
Summer range
Linen, cotton and the colours of the coast.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-property-grid id="pg-look" label="Card properties" hide-toolbar style="--bmx-property-grid-height: 26rem"></bmx-property-grid>
An inspector for any object
No schema at all: the grid reads an order record as it is — text, numbers, dates, a nested address and a list of lines — in A to Z order, read only. Search for post.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-property-grid id="pg-inspect" label="Order record" readonly view="alphabetical" style="inline-size: min(100%, 40rem); --bmx-property-grid-height: 24rem"></bmx-property-grid>