chakra-ui/dist/esm/FormLabel/index.js

Responsive and accessible React UI components built with React and Emotion

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";

/** @jsx jsx */
import { jsx } from "@emotion/core";
import { forwardRef } from "react";
import Box from "../Box";
import { useFormControl } from "../FormControl";
import { useUIMode } from "../ThemeProvider";
export var RequiredIndicator = function RequiredIndicator(props) {
  var _useUIMode = useUIMode(),
      mode = _useUIMode.mode;

  var color = {
    light: "red.500",
    dark: "red.300"
  };
  return jsx(Box, _extends({
    as: "span",
    ml: 1,
    color: color[mode],
    "aria-hidden": "true",
    children: "*"
  }, props));
};
export var FormLabel = forwardRef(function (_ref, ref) {
  var children = _ref.children,
      props = _objectWithoutProperties(_ref, ["children"]);

  var formControl = useFormControl(props);
  return jsx(Box, _extends({
    ref: ref,
    fontSize: "md",
    pr: "12px",
    pb: "4px",
    opacity: formControl.isDisabled ? "0.4" : "1",
    fontWeight: "medium",
    textAlign: "left",
    verticalAlign: "middle",
    display: "inline-block",
    as: "label"
  }, props), children, formControl.isRequired && jsx(RequiredIndicator, null));
});
export default FormLabel;