Input
An advanced input component with toggable extensions.
Playground
Customize the Input properties to see different variations.
http://
0/33
Customize
Installation
pnpm dlx shadcn@latest add https://shadcn-ui-variants.vercel.app/r/input.jsonExamples
With startInline and endInline
€EUR
With startAddon and endIcon
https://
Dynamic Input (loading icon, clear button, showLength)
Input Props
| Prop | Type | Default |
|---|---|---|
startIcon | React.ReactElement<enum> | — |
endIcon | React.ReactElement<enum> | — |
startInline | string | — |
endInline | string | — |
startAddon | React.ReactNode | — |
endAddon | React.ReactNode | — |
showMaxLength | enum | "false" |