@grafana/ui/dist/cjs/components/FormField/FormField.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var FormLabel = require('../FormLabel/FormLabel.cjs');

"use strict";
const FormField = ({
  label,
  tooltip,
  labelWidth = 6,
  inputWidth = 12,
  inputEl,
  className,
  interactive,
  ...inputProps
}) => {
  const styles = getStyles();
  const id = React.useId();
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx(styles.formField, className), children: [
    /* @__PURE__ */ jsxRuntime.jsx(FormLabel.InlineFormLabel, { htmlFor: id, width: labelWidth, tooltip, interactive, children: label }),
    inputEl || /* @__PURE__ */ jsxRuntime.jsx(
      "input",
      {
        id,
        type: "text",
        className: `gf-form-input ${inputWidth ? `width-${inputWidth}` : ""}`,
        ...inputProps,
        disabled: inputProps.disabled
      }
    )
  ] });
};
FormField.displayName = "FormField";
const getStyles = () => {
  return {
    formField: css.css({
      display: "flex",
      flexDirection: "row",
      alignItems: "flex-start",
      textAlign: "left",
      position: "relative"
    })
  };
};

exports.FormField = FormField;
//# sourceMappingURL=FormField.cjs.map