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
  • 5
  • 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

0 Answers0