Input

Inputs allow users to enter text, they usually appear in forms.

size

import Input from "@/components/ui/Input";

export default function Page() {
  return (
    <div className="flex items-center gap-4">
      <Input size="sm" placeholder="sm size" />
      <Input size="md" placeholder="md size" />
      <Input size="lg" placeholder="lg size" />
    </div>
  )
}

state

import Input from "@/components/ui/Input";

export default function Page() {
  return (
    <div className="grid grid-cols-2 items-center gap-4">
      <Input state="warning" placeholder="warning message" />
      <Input state="error" placeholder="error message" />
    </div>
  )
}

prefix

import { IconUserFilled, IconLockFilled } from '@tabler/icons-react';
import Input from "@/components/ui/Input";

export default function Page() {
  return (
    <div className="grid grid-cols-2 gap-4">
      <Input prefix={<IconUserFilled size={20} color="gray" />} />
      <Input type="password" prefix={<IconLockFilled size={20} color="gray" />} />
    </div>
  )
}

suffix

Kg

MB

import { IconUserFilled, IconLockFilled } from '@tabler/icons-react';
import Input from "@/components/ui/Input";

export default function Page() {
  return (
    <div className="grid grid-cols-2 gap-4">
      <Input prefix={<IconUserFilled size={20} color="gray" />} />
      <Input type="password" prefix={<IconLockFilled size={20} color="gray" />} />
    </div>
  )
}

disabled