0
const StyledInput = styled.input`w-full focus:ring-indigo-500 focus:border-indigo-500 block p-2 border-gray-300 border-2 rounded-md`;

export const Input = (props: StyledInputProps) => {
    return props.iconPosition === 'trailing' ? (
        <div>
            {props.label && <div tw="text-coolGray-800">{props.label}</div>}
            <div tw="w-full relative rounded-md shadow-sm flex">
                <StyledInput {...props} />
                <div tw="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                    {props.icon}
                </div>
            </div>
        </div>
    ) : (
        <div>
            {props.label && <div tw="text-coolGray-800">{props.label}</div>}
            <div tw="w-full relative rounded-md flex bg-white">
                {props.icon && (
                    <div tw="z-10 h-full leading-snug font-normal absolute text-center rounded text-base items-center justify-center w-8 pl-3 py-3">
                        {props.icon}
                    </div>
                )}
                <StyledInput {...props} />
            </div>
        </div>
    );
};

No Matter how I try to style the leading input Icon, I always get this: enter image description here

I'm trying to get the icon to go inside the input element, like Put icon inside input element in a form

But Even trying all the normal answers, I can't figure it out, is there something really dumb I'm missing?

connorjohnson
  • 62
  • 7
  • 1
    It looks like you might need to add some padding to your input to push the content to the right of your icon. Also, shouldn't you be using the `className` prop instead of `tw` for your Tailwind classes? – Ed Lucas Mar 04 '22 at 22:19
  • tw is twin.macro, its a library to make styling tailwind easier – connorjohnson Mar 04 '22 at 23:29
  • @EdLucas How do I add the padding to the input field using tailwind? what's the selector – connorjohnson Mar 04 '22 at 23:55
  • Isn't it just your `StyledInput`? If not, you could add an example the final rendered markup in your question. – Ed Lucas Mar 05 '22 at 14:50

1 Answers1

0
          <div>
            <label
              for="input-group-1"
              class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
            >
              Email
            </label>

            <div class="relative mb-6">
              <MdEmail className="pointer-events-none w-8 h-8 absolute top-1/2 transform -translate-y-1/2 left-3 " />

              <input
                type="text"
                id="input-group-1"
                class="bg-gray-50 border pl-12 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                placeholder="name@gmail.com"
              />
            </div>
          </div>`
Nagin Shrestha
  • 1
  • 1
  • 1
    Your answer could be improved with supporting information as to how this solves the problem. This will help later readers to understand the solution. – Harrison May 19 '23 at 11:25