Usage

import { Input } from "@aqqo/aqqo-ui";

<Input placeholder="Placeholder" />

Examples

With label

import { Label, Input } from "@aqqo/aqqo-ui";

<div className="grid w-full max-w-sm items-center gap-2">
  <Label htmlFor="name">Name</Label>
  <Input id="name" placeholder="Placeholder" />
</div>;

Disabled

With tooltip

import { Input, Tooltip } from "@aqqo/aqqo-ui";

<div className="grid w-full max-w-sm items-center gap-2">
  <div className="relative flex items-center">
    <Input className="!pr-11" />

    <Tooltip.Provider>
      <Tooltip>
        <Tooltip.Trigger asChild>
          <Question
            weight="bold"
            className="text-zinc-500 size-4 absolute right-4 hidden md:block"
          />
        </Tooltip.Trigger>
        <Tooltip.Content>
          <div>Tooltip</div>
        </Tooltip.Content>
      </Tooltip>
    </Tooltip.Provider>
  </div>
</div>;

With leadingIcon

import { Input } from "@aqqo/aqqo-ui";

<div className="grid w-full max-w-sm items-center gap-2">
  <div className="relative flex items-center">
    <Input className="!pl-11" />

    <EnvelopeSimple
      weight="duotone"
      className="text-zinc-500 absolute left-4 size-4 pointer-events-none"
    />
  </div>
</div>;