InputField

An input box with an associated label, error message, and context help. See also:

• Input, for a simple input box, without these extra parts.
• SearchInput

Features

• A label to be associated with the input, placed before or above the input. See the spec.
• Error message shown as a tooltip. See the spec.
• Context help. See the spec.

Live example

Result

Loading...

Live Editor

<div style={{ display: "inline-flex", flexDirection: "column", alignItems: "end" }} > <InputField label="Label:" placeholder="Placeholder" contextHelp="Context help" /> <br /> <InputField label="Error:" validationState="error" placeholder="Error shown on hover" validationMessage="Error message" /> <br /> <InputField label="Warning:" validationState="warning" placeholder="Warning shown on hover" validationMessage="Warning message" /> <br /> <InputField label="Label above:" labelPlacement="above" /> </div>

<div
  style={{ display: "inline-flex", flexDirection: "column", alignItems: "end" }}
>
  <InputField
    label="Label:"
    placeholder="Placeholder"
    contextHelp="Context help"
  />
  <br />
  <InputField
    label="Error:"
    validationState="error"
    placeholder="Error shown on hover"
    validationMessage="Error message"
  />
  <br />
  <InputField
    label="Warning:"
    validationState="warning"
    placeholder="Warning shown on hover"
    validationMessage="Warning message"
  />
  <br />

  <InputField label="Label above:" labelPlacement="above" />
</div>

Label Alignment

Use LabeledControlsAlignmentProvider to align InputField with other labeled controls, according to the design guidelines.

Result

Loading...

Live Editor

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

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