# Design inputs A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Manufacturing](https://beamline.io/components/apps/manufacturing) app. Live demo: https://beamline.io/components/design-inputs What a solar design is checked against, and what the home really uses. Code standards and site conditions (building, electrical and fire codes, wind, exposure, snow load, design temperatures) each with the source it came from; one not found for the address said with what it blocks, and filled by hand with its value and source, then marked with who entered it; how many are missing counted. For a home that already has panels, its monitored generation reconciled with the utility bills month by month (from the grid, to the grid, panels made, home used), a month with a monitoring gap said with why and filled from the estimate, until the home's true yearly use is set against what the bills show. ## Use it for - Engineering inputs drawn from public sources where a gap must be filled with its source named. - Reconciling metered and monitored energy to find a site's true use. ## Not for - Checking the finished design ([plan-readiness](https://beamline.io/components/plan-readiness)). - The quote and bill ([solar-quote](https://beamline.io/components/solar-quote)). ## Anatomy - bar: project; Standards and site, Existing system - standards: missing count or all found; each input with value and source, or not found with what it blocks and value, source and Use this value; entered by - existing: why the bills undercount; months with from grid, to grid, panels made (gap and estimate switch) and home used; months that don't add up, or the true yearly use against the bills ## States - input missing - entered by hand - month with a gap - estimated - true usage known ## Keyboard - Tab through the gaps' fields and the estimate switches ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `title` (required) | `string` | — | The project, as its title reads. | | `defaultInputs` (required) | `DesignInput[]` | — | | | `months` (required) | `UsageMonth[]` | — | | | `me` (required) | `string` | — | Who is signed in, for inputs filled by hand. | | `defaultTab` | `"existing" \| "standards"` | — | | | `onInputsChange` | `((i: DesignInput[]) => void)` | — | | | `className` | `string` | — | Classes on the documented visual root; no override by default. | | `style` | `CSSProperties` | — | Inline styles on the documented visual root; no overrides by default. | | `ref` | `Ref` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - tabs - input - button - switch ## Dependencies `lucide-react` ## Import ```tsx import { DesignInputs } from "@beamline/design-inputs"; ``` ## Get it Design inputs is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Manufacturing - [Shop floor](https://beamline.io/components/shop-floor): A workshop's shop floor at one workstation: each job is a card at its work centre with why it isn't ready said in words (parts short, or the previous… - [Production plan](https://beamline.io/components/production-plan): A production plan by month: each product's starting stock, forecast demand, replenishment and ending stock, every ending rolling into the next month's… - [Production and lots](https://beamline.io/components/production-lots): Stock made and stored, with every movement traceable. A batch of a recipe, read as a batch sheet: the recipe, batches (in halves) and day as one sentence… - [Print scheduler](https://beamline.io/components/print-scheduler): A print shop's production schedule. The week by station: each station's day holds its runs, with a load bar and minutes used against the station's… - [Plan readiness](https://beamline.io/components/plan-readiness): A solar plan on its way to a permit. The design checks (fire setback from the ridge, string voltage in the cold, roof load, eave and rake setbacks, the… - [Solar quote](https://beamline.io/components/solar-quote): A residential solar quote. The system's price at its rate per watt with adders, discounts and incentives each switched on or off: discounts come off one… - [Roof layout](https://beamline.io/components/roof-layout): The roof of a solar design. The roof in plan with every face's panels drawn as they lie under its roof type's rules (projected from the slope), each… - [Electrical design](https://beamline.io/components/electrical-design): The electrical side of a solar design. The existing service set up from a named way of connecting to it (a load-side breaker or a supply-side tap), the… - [Battery sizing](https://beamline.io/components/battery-sizing): A home battery sized beside its solar. The model and how many with capacity, power and installed price; how it runs (kept full for an outage, storing… - [Field conditions](https://beamline.io/components/field-conditions): A farm's fields and what each one's conditions are. The fields as a searchable list (each with its outline, crop, area and the layer's value, or Not… - [Grazing plan](https://beamline.io/components/grazing-plan): Mobs on a grazing rotation, on the farm's map: with a map base, its parcels are the paddocks, each filled by where it stands in the chosen mob's plan (on… - [Run of show](https://beamline.io/components/run-of-show): One service or event plan's order, run more than once: sections and items with each occurrence's start time in its own column, each item's length dragged… - [Sound library](https://beamline.io/components/sound-library): A library of sounds (or any media a person auditions before using): a search by words and #tags with facets as filters, a live "3 filters · 12 results"… - [Tag manager](https://beamline.io/components/tag-manager): Tags for one or several items at once (sounds, photos, documents). Nested tag groups are edited in place (rename, new tag), and a folded group still says… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).