Size variants for Input components?

[pauksztello]

I was wondering why inputs don’t have sizing variants. Wouldn’t it make sense for them to support the same size prop as buttons? The default shadcn input height has always felt a bit too small to me.

[gitsult4n]

The blocker is the dom

<input> already owns a native size attribute that takes a number of characters so a size prop on the component collides with it
Button has no such conflict which is why it ships variants

You own the file so add it with cva and shadow the native prop

import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const inputVariants = cva(
  "flex w-full min-w-0 rounded-md border bg-transparent px-3 py-1 shadow-xs outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50",
  {
    variants: {
      size: {
        sm: "h-8 px-2.5 text-sm",
        default: "h-9 text-base md:text-sm",
        lg: "h-10 px-4 text-base",
      },
    },
    defaultVariants: { size: "default" },
  }
)

type InputProps = Omit<React.ComponentProps<"input">, "size"> &
  VariantProps<typeof inputVariants>

function Input({ className, type, size, ...props }: InputProps) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(inputVariants({ size }), className)}
      {...props}
    />
  )
}

export { Input, inputVariants }

Omit<..., "size"> is the part people miss and without it typescript keeps the native number type

Keep the heights on the same scale as button so h-8 h-9 h-10 line up in a form row
Do the same in select and textarea or mixed rows drift by a pixel or two