DEV Community

Cover image for How to create Google's Input Field with Tailwind?
Gabriel Linassi
Gabriel Linassi

Posted on

How to create Google's Input Field with Tailwind?

Image description

const inputClasses = {
  root: /*tw:*/ `group relative h-14 w-full rounded-md border border-[#a5a5a6] focus-within:border-primary focus-within:ring-1 focus-within:ring-primary`,
  label: /*tw:*/ `absolute left-2 top-1/2 z-0 -translate-y-1/2 bg-white px-1 text-base pointer-events-none duration-200 group-focus-within:top-0 group-focus-within:text-xs group-focus-within:text-primary`,
  input: /*tw:*/ `z-10 h-full w-full rounded-md px-3.5 py-4 outline-none`,
};

function Input({ placeholder, ...props }: React.ComponentProps<'input'>) {
  return (
    <div className={inputClasses.root}>
      <label
        className={cnMerge([inputClasses.label, props.value && 'top-0 text-xs'])}
        htmlFor={props.id ?? props.name}
      >
        {placeholder}
      </label>
      <input id={props.id ?? props.name} {...props} className={inputClasses.input} />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)