Input Group

A group of input elements that can be used to create a form.

Import

import { InputGroup } from "@aeonkit/react";

Usage

Left Addon

Preview
Code

<InputGroup className="max-w-sm">
  <InputGroup.LeftAddon>
    <LuMail className="h-5 w-5 text-indigo-500" aria-hidden="true" />
  </InputGroup.LeftAddon>
  <InputGroup.Input className="pl-10" />
</InputGroup>

Right Addon

Preview
Code

<InputGroup className="max-w-sm">
  <InputGroup.Input className="pr-10" />
  <InputGroup.RightAddon>
    <LuHeart className="h-5 w-5 text-pink-500" aria-hidden="true" />
  </InputGroup.RightAddon>
</InputGroup>

With Left and Right Addons

Preview
Code

<InputGroup className="max-w-sm">
  <InputGroup.LeftAddon>
    <LuMail className="h-5 w-5 text-indigo-500" aria-hidden="true" />
  </InputGroup.LeftAddon>
  <InputGroup.Input className="pr-10 pl-10" />
  <InputGroup.RightAddon>
    <LuHeart className="h-5 w-5 text-pink-500" aria-hidden="true" />
  </InputGroup.RightAddon>
</InputGroup>

Props

API Interface: InputGroupProps

API Interface: InputGroupInputProps

API Interface: InputGroupLeftAddonProps

API Interface: InputGroupRightAddonProps