Input layout

[ryanmckaytx]

```js
const selected_merchant = view(
  Inputs.select(merchants, {
    label: "Store",
  })
);
const start_date = view(
  Inputs.date({label: "Start", min: "2023-01-01", max: "2023-12-31", value: "2023-10-01"})
);
const end_date = view(
  Inputs.date({label: "End", min: "2023-01-01", max: "2023-12-31", value: "2023-12-31"})
);
```

renders as:

how could you get it to render more like:

[Fil]

With a bit of CSS:

<style>
  .inline {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 640px;
  }
  .inline form {
    max-width: 200px;
    display: flow;
  }
</style>

It can also be nice to return this as a combined input, with Inputs.form

See https://observablehq.observablehq.cloud/pangea/support/input-layout for the implementation.

[ryanmckaytx]

worked perfectly, thank you so much!

[ryanmckaytx]

How would you package all of that as a component?

[Fil]

See https://observablehq.com/framework/lib/inputs to import Inputs. Then probably attach the styles inline instead of via a stylesheet? Let me know if you try it.