@equinor/eds-core-react/dist/esm/components/TextField/TextField.js

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useInputField } from '../InputWrapper/useInputField.js';
import { InputWrapper } from '../InputWrapper/InputWrapper.js';
import { Input } from '../Input/Input.js';

const TextField = /*#__PURE__*/forwardRef(function TextField({
  id,
  label,
  meta,
  unit,
  helperText,
  placeholder,
  disabled,
  className,
  variant,
  inputIcon,
  helperIcon,
  style,
  inputRef,
  ...other
}, ref) {
  const {
    ariaProps,
    containerProps,
    labelProps,
    helperProps
  } = useInputField({
    id,
    label,
    meta,
    helperText,
    helperIcon,
    variant,
    disabled,
    className,
    style
  });
  const hasRightAdornments = Boolean(unit || inputIcon);
  const fieldProps = {
    ...ariaProps,
    disabled,
    placeholder,
    variant,
    rightAdornments: hasRightAdornments && /*#__PURE__*/jsxs(Fragment, {
      children: [inputIcon, /*#__PURE__*/jsx("span", {
        children: unit
      })]
    }),
    ref: ref || inputRef,
    ...other
  };
  return /*#__PURE__*/jsx(InputWrapper, {
    helperProps: helperProps,
    labelProps: labelProps,
    ...containerProps,
    children: /*#__PURE__*/jsx(Input, {
      ...fieldProps
    })
  });
});

export { TextField };