LabeledControlsAlignmentProvider

Provides a context for labeled input controls with side-positioned labels to have their input boxes aligned. It doesn't render anything in DOM and only provides a context used by labeled controls to set a common width on labels so that the input boxes align. Labeled input controls are:

Result

Live Editor

<LabeledControlsAlignmentProvider>
  <div
    style={{
      display: "flex",
      flexDirection: "column",
      gap: "1rem",
      width: 400,
    }}
  >
    <InputField label="InputField:" />
    <InputField label="Second InputField:" />
    <Dropdown label="Dropdown:">
      <Item key="80">80</Item>
    </Dropdown>
    <ComboBox label="ComboBox:">
      <Item key="80">80</Item>
    </ComboBox>
  </div>
</LabeledControlsAlignmentProvider>

<LabeledControlsAlignmentProvider>
  <div
    style={{
      display: "flex",
      flexDirection: "column",
      gap: "1rem",
      width: 400,
    }}
  >
    <InputField label="InputField:" />
    <InputField label="Second InputField:" />
    <Dropdown label="Dropdown:">
      <Item key="80">80</Item>
    </Dropdown>
    <ComboBox label="ComboBox:">
      <Item key="80">80</Item>
    </ComboBox>
  </div>
</LabeledControlsAlignmentProvider>