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 { Input } from "@smartacteam/ambient-web/input";
import { InputGroup } from "@smartacteam/ambient-web/input-group";
import { IconMagnifyingGlass } from "@smartacteam/ambient-web/icons/icon-magnifying-glass";

<InputGroup.Root>
  <InputGroup.Input render={<Input.Text placeholder="Search..." />} />
  <InputGroup.Addon>
    <IconMagnifyingGlass />
  </InputGroup.Addon>
  <InputGroup.Addon align="inline-end">
    <InputGroup.Button>Search</InputGroup.Button>
  </InputGroup.Addon>
</InputGroup.Root>

Examples

Sizes

Set size on InputGroup.Root, not on the control inside it — the root owns the group's frame and height. The scale matches Input and Select.

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 size="sm">
        <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 size="default">
        <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 size="lg">
        <InputGroup.Input render={<Input.Text placeholder="Search..." />} />
        <InputGroup.Addon>
          <IconMagnifyingGlass />
        </InputGroup.Addon>
        <InputGroup.Addon align="inline-end">12 results</InputGroup.Addon>
      </InputGroup.Root>
    </div>
  );
}

Size-varying states

A spacing override applies to every state, including the one you were not looking at. See Styling.

import { Input } from "@smartacteam/ambient-web/input";
import { InputGroup } from "@smartacteam/ambient-web/input-group";

/**
 * `InputGroup` is the in-package precedent for the rule: it keeps control
 * height until it actually wraps a `textarea`, via `has-[>textarea]:h-auto`,
 * rather than dropping the frame for every case.
 */
export function InputGroupStatesDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <div
        data-control-row="input-group-collapsed"
        data-row-kind="equal"
        className="flex flex-wrap items-start gap-2"
      >
        <InputGroup.Root data-control>
          <InputGroup.Input render={<Input.Text placeholder="Search..." />} />
        </InputGroup.Root>
        <Input.Text data-control placeholder="Reference input" />
      </div>

      <div
        data-control-row="input-group-expanded"
        data-row-kind="grows"
        className="flex flex-wrap items-start gap-2"
      >
        <InputGroup.Root data-control-subject>
          <InputGroup.Textarea placeholder="Notes..." rows={3} />
        </InputGroup.Root>
        <Input.Text data-control placeholder="Reference input" />
      </div>
    </div>
  );
}