Inspect a footprint pad
Example board / Revision C
Selected board object: pad-a. The example supplies each dimension; selecting a pad does not change the board.
Pad inspector
Circuit-board pad selection with supplied footprint references, net and layer records, pad types and a dimension table with explicit units.
Preview
In action
When to use
Use it for
- Inspecting a bounded collection of pad records supplied by a board editor or manufacturing export.
- Supply unique, non-empty pad ids and unique measurement ids within each pad. Pad numbers may repeat; ids identify the actual records.
- Use value and onValueChange for host-owned selection and board or schematic cross-highlighting. No connectivity or geometry calculation runs in the component.
- Supply geometry values as strings to preserve significant figures. Null fields remain explicitly missing; an empty layers array means none recorded.
Not for
- Inferring that a missing net means unconnected, a missing drill means no hole, or an unknown layer list means every copper layer.
- Treating selection as a board edit or inferring dimensions from the shape name.
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 { PadInspector } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/pad-inspector.
2. Vendor the source
npx @noorddev/vlak-cli add pad-inspector
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/pad-inspector.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 { PadInspector } from "@noorddev/vlak-react";
<PadInspector label="Connector pads" name="pad" boardLabel="Example board, revision C" defaultValue="pad-a" pads={[
{ id: "pad-a", reference: "J1", number: "1", net: "Supply", layers: ["Front copper", "Back copper"], type: "Through hole", shape: "Circle", geometry: [
{ id: "diameter", label: "Pad diameter", value: "1.80", unit: "mm" },
{ id: "drill", label: "Drill diameter", value: "0.90", unit: "mm" },
] },
{ id: "pad-b", reference: "J1", number: "2", net: "Return", layers: ["Front copper"], type: "Surface mount", shape: "Rectangle" },
]} />Props
PadInspector
Inspects supplied pad records without inferring connectivity, shape or dimensions.
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | ReactNode | ||
padsrequired | readonly PadInspectorPad[] | ||
value | string | null | ||
defaultValue | string | null | null | |
onValueChange | (id: string | null) => void | Requests pad selection only. The host owns board and schematic cross-highlighting. | |
boardLabel | ReactNode | ||
description | ReactNode | ||
selectionLabel | string | "Pad" | |
required | boolean | ||
readOnly | boolean |
Also accepts Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "defaultValue">.
Keyboard
| Keys | Does |
|---|---|
| Tab | Focuses the Vlak pad selector. |
| Arrow keys, Home, End | Opens or moves through available pad choices. |
| Enter, Space | Chooses the focused pad. Controlled selection waits for a host update. |
| Escape | Closes the selector and keeps the current choice. |
Accessibility
- A fieldset legend names the inspector. Pad choices include their record id, so repeated pad numbers remain distinguishable.
- Vlak Select supplies the 44px trigger, keyboard listbox and disabled choices. Pad properties use a description list and dimensions use a captioned table with row and column headers.
- Missing records, unavailable selections, non-finite measurements and missing units have explicit text. Numeric zero and string precision are retained.
- Native form association and reset are supported. Read-only valid selection remains submittable, while disabled selection is omitted.
- The fieldset ref, native attributes, className and style pass through.
Markup
<fieldset class="rs-pad-inspector"><legend class="rs-pad-inspector-legend">Connector pads</legend><div class="rs-pad-inspector-label"><span id="pad-choice-label">Pad</span><div class="rs-select rs-select-fluid rs-pad-inspector-control"><button type="button" class="rs-dropdown" role="combobox" aria-labelledby="pad-choice-label" aria-expanded="false" aria-haspopup="listbox">J1 / Pad 1 · pad-a</button></div></div><dl class="rs-pad-inspector-properties"><div><dt class="rs-pad-inspector-term">Net</dt><dd class="rs-pad-inspector-detail">Supply</dd></div><div><dt class="rs-pad-inspector-term">Layers</dt><dd class="rs-pad-inspector-detail">Front copper, Back copper</dd></div></dl><table class="rs-pad-inspector-table"><caption class="rs-pad-inspector-caption">Supplied geometry</caption><thead><tr><th class="rs-pad-inspector-cell" scope="col">Dimension</th><th class="rs-pad-inspector-cell" scope="col">Value</th><th class="rs-pad-inspector-cell" scope="col">Unit</th></tr></thead><tbody><tr><th class="rs-pad-inspector-cell" scope="row">Pad diameter</th><td class="rs-pad-inspector-cell">1.80</td><td class="rs-pad-inspector-cell">mm</td></tr></tbody></table></fieldset>
Classes
.rs-pad-inspector.rs-pad-inspector-legend.rs-pad-inspector-label.rs-pad-inspector-control.rs-pad-inspector-properties.rs-pad-inspector-term.rs-pad-inspector-detail.rs-pad-inspector-table.rs-pad-inspector-caption.rs-pad-inspector-cell.rs-pad-inspector-note