Buy Pro
Docs
Input with Adornments

Input with Adornments

An input designed for adornments at the start and end.

Usage

import { InputWithAdornments } from '@/components/ui/input-with-adornments';
<InputWithAdornments
  type="password"
  startAdornment={<LockIcon className="h-4 w-4 shrink-0" />}
  endAdornment={
    <Button
      type="button"
      variant="ghost"
      size="icon"
      className="-mr-2.5 h-8 w-8"
    >
      <EyeIcon className="h-4 w-4 shrink-0" />
    </Button>
  }
/>