Module Skyline_field_v2Source

A composable form field container that arranges a visual label, an input control (e.g. text or textarea), and optional help text with consistent spacing. The field propagates shared size, intent, and disabled to its children so they render with a consistent look and feel.

This entire component is a <label>, so clicks anywhere inside it will trigger any contained <input>, because the label is "implicitly associated" with the input: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label#associating_a_label_with_a_form_control

Layout behavior

Renders a flex container laid out in a column with a small vertical gap between children. The field expands to the full width of its container.

Disabled states

When ~disabled:true is passed to view, all child content receives disabled = true via the Content.t callback. Built-in field children that render inputs (e.g., text inputs, checkboxes) will use this to render non‑interactable controls and appropriate disabled styling. Custom content that implements Content.t can adjust its appearance based on this flag.

Example

  let value, set_value = Bonsai.state "" graph in
  let%arr value and set_value in
  {%html|
    <Skyline_field_v2.view
      ~label:(<Skyline_field_v2.Label.content> Name </>)
      ~footer:(<Skyline_field_v2.Footer.content>
        Enter your full name.
      </>)
    >
      <Skyline_text_input_v2.view ~state:%{(value, set_value)} />
    </>
  |}

You can use ~label_position to control how the label is positioned with respect to the input:

  let value, set_value = Bonsai.state false graph in
  let%arr value and set_value in
  {%html|
    <Skyline_field_v2.view
      ~label:(<Skyline_field_v2.Label.content> Maintain risk parameters </>)
      ~label_position:%{Right}
      ~footer:(<Skyline_field_v2.Footer.content>
        Apply spline reticulation factors
      </>)
    >
      <Skyline_checkbox_input_v2.content ~state:%{(value, set_value)} />
    </>
  |}