Input Group

Display additional information or actions to an input or textarea.

12 results

https://

52% used

import { IconArrowUp } from "@smartacteam/ambient-web/icons/icon-arrow-up";
import { IconCheckmark2 } from "@smartacteam/ambient-web/icons/icon-checkmark-2";
import { IconCircleInfo } from "@smartacteam/ambient-web/icons/icon-circle-info";
import { IconMagnifyingGlass } from "@smartacteam/ambient-web/icons/icon-magnifying-glass";
import { IconPlusLarge } from "@smartacteam/ambient-web/icons/icon-plus-large";
import { Input } from "@smartacteam/ambient-web/input";
import { InputGroup } from "@smartacteam/ambient-web/input-group";
import { Menu } from "@smartacteam/ambient-web/menu";
import { Separator } from "@smartacteam/ambient-web/separator";
import { Tooltip } from "@smartacteam/ambient-web/tooltip";

export function InputGroupDemo() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <InputGroup.Root>
        <InputGroup.Input render={<Input.Text placeholder="Search..." />} />
        <InputGroup.Addon>
          <IconMagnifyingGlass />
        </InputGroup.Addon>
        <InputGroup.Addon align="inline-end">12 results</InputGroup.Addon>
      </InputGroup.Root>
      <InputGroup.Root>
        <InputGroup.Input
          render={<Input.Text placeholder="example.com" className="pl-1!" />}
        />
        <InputGroup.Addon>
          <InputGroup.Text>https://</InputGroup.Text>
        </InputGroup.Addon>
        <InputGroup.Addon align="inline-end">
          <Tooltip.Provider>
            <Tooltip.Root>
              <Tooltip.Trigger render={<IconCircleInfo />} />
              <Tooltip.Content>This is content in a tooltip.</Tooltip.Content>
            </Tooltip.Root>
          </Tooltip.Provider>
        </InputGroup.Addon>
      </InputGroup.Root>
      <InputGroup.Root>
        <InputGroup.Textarea placeholder="Ask, Search or Chat..." />
        <InputGroup.Addon align="block-end">
          <InputGroup.Button className="rounded-full">
            <IconPlusLarge />
          </InputGroup.Button>
          <Menu.Root>
            <Menu.Trigger
              render={
                <InputGroup.Button size="default">Auto</InputGroup.Button>
              }
            />
            <Menu.Content
              // side="top"
              align="start"
              className="[--radius:0.95rem]"
            >
              <Menu.Item>Auto</Menu.Item>
              <Menu.Item>Agent</Menu.Item>
              <Menu.Item>Manual</Menu.Item>
            </Menu.Content>
          </Menu.Root>
          <InputGroup.Text className="ml-auto">52% used</InputGroup.Text>
          <Separator orientation="vertical" className="h-4!" />
          <InputGroup.Button className="rounded-full" disabled>
            <IconArrowUp className="size-4" />
            <span className="sr-only">Send</span>
          </InputGroup.Button>
        </InputGroup.Addon>
      </InputGroup.Root>
      <InputGroup.Root>
        <InputGroup.Input render={<Input.Text placeholder="@ilikescience" />} />
        <InputGroup.Addon align="inline-end">
          <div className="bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full">
            <IconCheckmark2 />
          </div>
        </InputGroup.Addon>
      </InputGroup.Root>
    </div>
  );
}

Usage

import { InputGroup } from "@smartacteam/ambient-web/input-group";
import { IconMagnifyingGlass } from "@smartacteam/ambient-web/icons/icon-magnifying-glass";

<InputGroup.Root>
  <InputGroup.TextInput placeholder="Search..." />
  <InputGroup.Addon>
    <IconMagnifyingGlass />
  </InputGroup.Addon>
  <InputGroup.Addon align="inline-end">
    <InputGroup.Button>Search</InputGroup.Button>
  </InputGroup.Addon>
</InputGroup.Root>

Examples

Sizes

12 results

import { IconMagnifyingGlass } from "@smartacteam/ambient-web/icons/icon-magnifying-glass";
import { Input } from "@smartacteam/ambient-web/input";
import { InputGroup } from "@smartacteam/ambient-web/input-group";

export function InputGroupSizesDemo() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <InputGroup.Root>
        <InputGroup.Input
          render={<Input.Text size="default" placeholder="Search..." />}
        />
        <InputGroup.Addon>
          <IconMagnifyingGlass />
        </InputGroup.Addon>
        <InputGroup.Addon align="inline-end">12 results</InputGroup.Addon>
      </InputGroup.Root>
      <InputGroup.Root>
        <InputGroup.Input
          render={<Input.Text size="lg" placeholder="Search..." />}
        />
        <InputGroup.Addon>
          <IconMagnifyingGlass />
        </InputGroup.Addon>
        <InputGroup.Addon align="inline-end">12 results</InputGroup.Addon>
      </InputGroup.Root>
    </div>
  );
}