Обзор

AI-компоненты

Хуки

Ресурсы

llms.txt

Input Group

Гибкий компонент для группировки полей ввода с дополнениями, кнопками и другими элементами.

import { IconSearch } from "@tabler/icons-react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

export default function Particle() {
  return (
    <InputGroup>
      <InputGroupInput aria-label="Поиск" placeholder="Поиск" type="search" />
      <InputGroupAddon>
        <IconSearch aria-hidden="true" stroke={1.5} />
      </InputGroupAddon>
    </InputGroup>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/input-group

Использование

import { Input } from "@/components/ui/input"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group"

<InputGroup>
  <InputGroupInput type="email" placeholder="Email" />
  <InputGroupAddon>
    <MailIcon />
  </InputGroupAddon>
</InputGroup>

Справочник API

InputGroup

Основной компонент, оборачивающий поля ввода и дополнения.

Свойство	Тип	Описание
`className`	`string`	Дополнительные CSS-классы для применения к компоненту
`...props`	`React.ComponentProps<'div'>`	Поддерживаются все стандартные атрибуты элемента div

InputGroupAddon

Контейнер для дополнений, таких как иконки, текст, кнопки и другие элементы. Может располагаться в начале или в конце (по горизонтали), либо сверху или снизу (по вертикали) поля ввода.

Свойство	Тип	По умолчанию	Описание
`align`	`'inline-start' \| 'inline-end' \| 'block-start' \| 'block-end'`	`'inline-start'`	Положение дополнения относительно поля ввода. Используйте `inline-start` или `inline-end` для полей ввода и `block-start` или `block-end` для текстовых областей
`className`	`string`		Дополнительные CSS-классы для применения к компоненту
`...props`	`React.ComponentProps<'div'>`		Поддерживаются все стандартные атрибуты элемента div

Для корректной навигации по фокусу компонент InputGroupAddon следует размещать после поля ввода в порядке DOM.

InputGroupText

Компонент-контейнер для отображения текстового содержимого внутри InputGroupAddon. Автоматически стилизует текст приглушённым цветом и управляет размером иконок.

Свойство	Тип	Описание
`className`	`string`	Дополнительные CSS-классы для применения к компоненту
`...props`	`React.ComponentProps<'span'>`	Поддерживаются все стандартные атрибуты элемента span

InputGroupInput

Специализированный компонент поля ввода для использования внутри InputGroup. По сути это нестилизованный компонент Input, наследующий стили от родительского InputGroup.

Свойство	Тип	Описание
`className`	`string`	Дополнительные CSS-классы для применения к компоненту
`...props`	`InputProps`	Поддерживаются все свойства компонента Input, включая `type`, `placeholder`, `disabled` и другие.

InputGroupTextarea

Специализированный компонент текстовой области для использования внутри InputGroup. По сути это нестилизованный компонент Textarea, наследующий стили от родительского InputGroup.

Свойство	Тип	Описание
`className`	`string`	Дополнительные CSS-классы для применения к компоненту
`...props`	`TextareaProps`	Поддерживаются все свойства компонента Textarea, включая `placeholder`, `disabled`, `rows` и другие.

Примеры

С иконкой в конце

import { IconMail } from "@tabler/icons-react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

export default function Particle() {
  return (
    <InputGroup>
      <InputGroupInput
        aria-label="Эл. почта"
        placeholder="Эл. почта"
        type="email"
      />
      <InputGroupAddon align="inline-end">
        <IconMail aria-hidden="true" stroke={1.5} />
      </InputGroupAddon>
    </InputGroup>
  );
}

С текстом в начале

i.cal.com/

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group";

export default function Particle() {
  return (
    <InputGroup>
      <InputGroupInput
        aria-label="Укажите свой URL"
        className="*:[input]:ps-0!"
        placeholder="oracul"
        type="search"
      />
      <InputGroupAddon>
        <InputGroupText>i.cal.com/</InputGroupText>
      </InputGroupAddon>
    </InputGroup>
  );
}

С текстом в конце

@localhost:4001

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group";

export default function Particle() {
  return (
    <InputGroup>
      <InputGroupInput
        aria-label="Выберите имя пользователя"
        placeholder="Выберите имя пользователя"
        type="text"
      />
      <InputGroupAddon align="inline-end">
        <InputGroupText>@localhost:4001</InputGroupText>
      </InputGroupAddon>
    </InputGroup>
  );
}

С текстом в начале и в конце

https://

.com

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group";

export default function Particle() {
  return (
    <InputGroup>
      <InputGroupInput
        aria-label="Введите ваш домен"
        className="*:[input]:px-0!"
        placeholder="oracul"
        type="text"
      />
      <InputGroupAddon>
        <InputGroupText>https://</InputGroupText>
      </InputGroupAddon>
      <InputGroupAddon align="inline-end">
        <InputGroupText>.com</InputGroupText>
      </InputGroupAddon>
    </InputGroup>
  );
}

С подсказкой

"use client";

import { IconInfoCircle } from "@tabler/icons-react";
import { Button } from "@/components/ui/button";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import {
  Popover,
  PopoverPopup,
  PopoverTrigger,
} from "@/components/ui/popover";

export default function Particle() {
  return (
    <InputGroup>
      <InputGroupInput
        aria-label="Пароль"
        placeholder="Пароль"
        type="password"
      />
      <InputGroupAddon align="inline-end">
        <Popover>
          <PopoverTrigger
            openOnHover
            render={
              <Button
                aria-label="Требования к паролю"
                size="icon-xs"
                variant="ghost"
              />
            }
          >
            <IconInfoCircle stroke={1.5} />
          </PopoverTrigger>
          <PopoverPopup side="top" tooltipStyle>
            <p>Минимум 8 символов</p>
          </PopoverPopup>
        </Popover>
      </InputGroupAddon>
    </InputGroup>
  );
}

С кнопкой-иконкой

"use client";

import { IconCheck, IconCopy } from "@tabler/icons-react";
import { useRef } from "react";
import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
import { Button } from "@/components/ui/button";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import {
  Tooltip,
  TooltipPopup,
  TooltipTrigger,
} from "@/components/ui/tooltip";

export default function Particle() {
  const { copyToClipboard, isCopied } = useCopyToClipboard();
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <InputGroup>
      <InputGroupInput
        aria-label="Ссылка"
        defaultValue="https://localhost:4001"
        ref={inputRef}
        type="text"
      />
      <InputGroupAddon align="inline-end">
        <Tooltip>
          <TooltipTrigger
            render={
              <Button
                aria-label="Копировать"
                onClick={() => {
                  if (inputRef.current) {
                    copyToClipboard(inputRef.current.value);
                  }
                }}
                size="icon-xs"
                variant="ghost"
              />
            }
          >
            {isCopied ? <IconCheck stroke={1.5} /> : <IconCopy stroke={1.5} />}
          </TooltipTrigger>
          <TooltipPopup>
            <p>Копировать в буфер обмена</p>
          </TooltipPopup>
        </Tooltip>
      </InputGroupAddon>
    </InputGroup>
  );
}

С кнопкой

import { Button } from "@/components/ui/button";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

export default function Particle() {
  return (
    <InputGroup>
      <InputGroupInput placeholder="Введите запрос…" type="search" />
      <InputGroupAddon align="inline-end">
        <Button size="xs" variant="secondary">
          Найти
        </Button>
      </InputGroupAddon>
    </InputGroup>
  );
}

С бейджем

Бейдж

import { Badge } from "@/components/ui/badge";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

export default function Particle() {
  return (
    <InputGroup>
      <InputGroupInput
        placeholder="Начните вводить для поиска…"
        type="search"
      />
      <InputGroupAddon align="inline-end">
        <Badge variant="info">Бейдж</Badge>
      </InputGroupAddon>
    </InputGroup>
  );
}

С сочетанием клавиш

⌘K

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { Kbd } from "@/components/ui/kbd";

export default function Particle() {
  return (
    <InputGroup>
      <InputGroupInput placeholder="Поиск…" type="search" />
      <InputGroupAddon align="inline-end">
        <Kbd>⌘K</Kbd>
      </InputGroupAddon>
    </InputGroup>
  );
}

С внутренней меткой

Эл. почта

"use client";

import { IconInfoCircle } from "@tabler/icons-react";
import { Button } from "@/components/ui/button";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { Label } from "@/components/ui/label";
import {
  Popover,
  PopoverPopup,
  PopoverTrigger,
} from "@/components/ui/popover";

export default function Particle() {
  return (
    <InputGroup>
      <InputGroupInput
        id="email-1"
        placeholder="team@localhost:4001"
        type="email"
      />
      <InputGroupAddon align="block-start">
        <Label className="text-foreground" htmlFor="email-1">
          Эл. почта
        </Label>
        <Popover>
          <PopoverTrigger
            className="ml-auto"
            openOnHover
            render={<Button className="-m-1" size="icon-xs" variant="ghost" />}
          >
            <IconInfoCircle stroke={1.5} />
          </PopoverTrigger>
          <PopoverPopup side="top" tooltipStyle>
            <p>Мы будем использовать его для отправки уведомлений</p>
          </PopoverPopup>
        </Popover>
      </InputGroupAddon>
    </InputGroup>
  );
}

Маленький размер

import { IconSearch } from "@tabler/icons-react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

export default function Particle() {
  return (
    <InputGroup>
      <InputGroupInput
        aria-label="Поиск"
        placeholder="Поиск"
        size="sm"
        type="search"
      />
      <InputGroupAddon>
        <IconSearch aria-hidden="true" stroke={1.5} />
      </InputGroupAddon>
    </InputGroup>
  );
}

Большой размер

import { IconSearch } from "@tabler/icons-react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

export default function Particle() {
  return (
    <InputGroup>
      <InputGroupInput
        aria-label="Поиск"
        placeholder="Поиск"
        size="lg"
        type="search"
      />
      <InputGroupAddon>
        <IconSearch aria-hidden="true" stroke={1.5} />
      </InputGroupAddon>
    </InputGroup>
  );
}

Отключённое состояние

import { IconArrowRight } from "@tabler/icons-react";
import { Button } from "@/components/ui/button";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

export default function Particle() {
  return (
    <InputGroup>
      <InputGroupInput
        aria-label="Подписаться на рассылку"
        disabled
        placeholder="Ваш email"
        type="email"
      />
      <InputGroupAddon align="inline-end">
        <Button
          aria-label="Подписаться"
          disabled
          size="icon-xs"
          variant="ghost"
        >
          <IconArrowRight aria-hidden="true" stroke={1.5} />
        </Button>
      </InputGroupAddon>
    </InputGroup>
  );
}

Загрузка

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { Spinner } from "@/components/ui/spinner";

export default function Particle() {
  return (
    <InputGroup>
      <InputGroupInput disabled placeholder="Идёт поиск…" type="search" />
      <InputGroupAddon align="inline-end">
        <Spinner />
      </InputGroupAddon>
    </InputGroup>
  );
}

С текстовой областью

Использовано 78%

"use client";

import { IconArrowUp, IconPlus } from "@tabler/icons-react";
import { Button } from "@/components/ui/button";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group";
import {
  Menu,
  MenuItem,
  MenuPopup,
  MenuTrigger,
} from "@/components/ui/menu";
import {
  Tooltip,
  TooltipPopup,
  TooltipTrigger,
} from "@/components/ui/tooltip";

export default function Particle() {
  return (
    <InputGroup>
      <InputGroupTextarea placeholder="Спросите, найдите или начните чат…" />
      <InputGroupAddon align="block-end">
        <Menu>
          <Tooltip>
            <TooltipTrigger
              render={
                <MenuTrigger
                  render={
                    <Button
                      aria-label="Добавить файлы"
                      className="rounded-full"
                      size="icon-sm"
                      variant="ghost"
                    />
                  }
                >
                  <IconPlus stroke={1.5} />
                </MenuTrigger>
              }
            />
            <TooltipPopup>Файлы и другое</TooltipPopup>
          </Tooltip>
          <MenuPopup align="start">
            <MenuItem>Добавить фото и файлы</MenuItem>
            <MenuItem>Создать изображение</MenuItem>
            <MenuItem>Размышление</MenuItem>
            <MenuItem>Глубокое исследование</MenuItem>
          </MenuPopup>
        </Menu>
        <InputGroupText className="ml-auto">Использовано 78%</InputGroupText>
        <Tooltip>
          <TooltipTrigger
            render={
              <Button
                aria-label="Отправить"
                className="rounded-full"
                size="icon-sm"
                variant="default"
              >
                <IconArrowUp stroke={1.5} />
              </Button>
            }
          />
          <TooltipPopup>Отправить</TooltipPopup>
        </Tooltip>
      </InputGroupAddon>
    </InputGroup>
  );
}