Blips
Documentação

Input Group

Adicione addons, botões e conteúdo auxiliar a inputs.

Carregando…
"use client";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@blips/ui/components/input-group";
export default function InputGroupDemo() {
  return (
    <InputGroup>
      <InputGroupAddon>https://</InputGroupAddon>
      <InputGroupInput placeholder="example.com" />
    </InputGroup>
  );
}

Instalação

pnpm add @blips/ui

Uso

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@blips/ui/components/input-group"
<InputGroup>
  <InputGroupInput placeholder="Buscar..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

Alinhamento

Use a prop align em InputGroupAddon para posicionar o addon em relação ao input.

Nota: Para um gerenciamento de foco adequado, o InputGroupAddon deve sempre ser posicionado depois de InputGroupInput ou InputGroupTextarea no DOM. Use a prop align para posicionar o addon visualmente.

Exemplos

Ícone

Posicione ícones em qualquer extremidade do input usando InputGroupAddon.

Carregando…
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@blips/ui/components/input-group";
import {
  Check,
  CreditCard,
  Info,
  EnvelopeSimple,
  MagnifyingGlass,
  Star,
} from "@phosphor-icons/react";

export default function InputGroupIcon() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <InputGroup>
        <InputGroupInput placeholder="MagnifyingGlass..." />
        <InputGroupAddon>
          <MagnifyingGlass />
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput type="email" placeholder="Enter your email" />
        <InputGroupAddon>
          <EnvelopeSimple />
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput placeholder="Card number" />
        <InputGroupAddon>
          <CreditCard />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <Check />
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput placeholder="Card number" />
        <InputGroupAddon align="inline-end">
          <Star />
          <Info />
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

Texto

Use InputGroupText para exibir prefixos, sufixos ou textos auxiliares ao lado do input.

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

export default function InputGroupTextExample() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <InputGroup>
        <InputGroupAddon>
          <InputGroupText>$</InputGroupText>
        </InputGroupAddon>
        <InputGroupInput placeholder="0.00" />
        <InputGroupAddon align="inline-end">
          <InputGroupText>USD</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupAddon>
          <InputGroupText>https://</InputGroupText>
        </InputGroupAddon>
        <InputGroupInput placeholder="example.com" className="pl-0.5!" />
        <InputGroupAddon align="inline-end">
          <InputGroupText>.com</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput placeholder="Enter your username" />
        <InputGroupAddon align="inline-end">
          <InputGroupText>@company.com</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupTextarea placeholder="Enter your message" />
        <InputGroupAddon align="block-end">
          <InputGroupText className="text-xs text-muted-foreground">
            120 characters left
          </InputGroupText>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

Dropdown

Combine InputGroupButton com um DropdownMenu para oferecer ações dentro do input.

Carregando…
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@blips/ui/components/dropdown-menu";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@blips/ui/components/input-group";
import { CaretDown, DotsThree } from "@phosphor-icons/react";

export default function InputGroupDropdown() {
  return (
    <div className="grid w-full max-w-sm gap-4">
      <InputGroup>
        <InputGroupInput placeholder="Enter file name" />
        <InputGroupAddon align="inline-end">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <InputGroupButton
                variant="ghost"
                aria-label="More"
                size="icon-xs"
              >
                <DotsThree />
              </InputGroupButton>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem>Gear</DropdownMenuItem>
              <DropdownMenuItem>Copy path</DropdownMenuItem>
              <DropdownMenuItem>Open location</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup className="[--radius:1rem]">
        <InputGroupInput placeholder="Enter search query" />
        <InputGroupAddon align="inline-end">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <InputGroupButton variant="ghost" className="pr-1.5! text-xs">
                MagnifyingGlass In... <CaretDown className="size-3" />
              </InputGroupButton>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="[--radius:0.95rem]">
              <DropdownMenuItem>Documentation</DropdownMenuItem>
              <DropdownMenuItem>Blog Posts</DropdownMenuItem>
              <DropdownMenuItem>Changelog</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

Spinner

Exiba um Spinner no input para indicar estados de carregamento.

Carregando…
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@blips/ui/components/input-group";
import { Spinner } from "@blips/ui/components/spinner";
import { CircleNotch } from "@phosphor-icons/react";

export default function InputGroupSpinner() {
  return (
    <div className="grid w-full max-w-sm gap-4">
      <InputGroup data-disabled>
        <InputGroupInput placeholder="Searching..." disabled />
        <InputGroupAddon align="inline-end">
          <Spinner />
        </InputGroupAddon>
      </InputGroup>
      <InputGroup data-disabled>
        <InputGroupInput placeholder="Processing..." disabled />
        <InputGroupAddon>
          <Spinner />
        </InputGroupAddon>
      </InputGroup>
      <InputGroup data-disabled>
        <InputGroupInput placeholder="Saving changes..." disabled />
        <InputGroupAddon align="inline-end">
          <InputGroupText>Saving...</InputGroupText>
          <Spinner />
        </InputGroupAddon>
      </InputGroup>
      <InputGroup data-disabled>
        <InputGroupInput placeholder="Refreshing data..." disabled />
        <InputGroupAddon>
          <CircleNotch className="animate-spin" />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <InputGroupText className="text-muted-foreground">
            Please wait...
          </InputGroupText>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

Textarea

Use InputGroupTextarea com addons em block-start e block-end para criar editores ricos.

Carregando…
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupText,
  InputGroupTextarea,
} from "@blips/ui/components/input-group";
import {
  Copy,
  ArrowBendDownLeft,
  FileCode,
  ArrowsClockwise,
} from "@phosphor-icons/react";

export default function InputGroupTextareaExample() {
  return (
    <div className="grid w-full max-w-md gap-4">
      <InputGroup>
        <InputGroupTextarea
          id="textarea-code-32"
          placeholder="console.log('Hello, world!');"
          className="min-h-[200px]"
        />
        <InputGroupAddon align="block-end" className="border-t">
          <InputGroupText>Line 1, Column 1</InputGroupText>
          <InputGroupButton size="sm" className="ml-auto" variant="default">
            Run <ArrowBendDownLeft />
          </InputGroupButton>
        </InputGroupAddon>
        <InputGroupAddon align="block-start" className="border-b">
          <InputGroupText className="font-mono font-medium">
            <FileCode />
            script.js
          </InputGroupText>
          <InputGroupButton className="ml-auto" size="icon-xs">
            <ArrowsClockwise />
          </InputGroupButton>
          <InputGroupButton variant="ghost" size="icon-xs">
            <Copy />
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

Input Customizado

Adicione o atributo data-slot="input-group-control" ao seu input customizado para o tratamento automático do estado de foco.

Carregando…
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupTextarea,
} from "@blips/ui/components/input-group";

export default function InputGroupCustom() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <InputGroup>
        <InputGroupTextarea
          placeholder="Autoresize textarea..."
          className="min-h-16"
        />
        <InputGroupAddon align="block-end">
          <InputGroupButton className="ml-auto" size="sm" variant="default">
            Submit
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

Referência da API

InputGroup

O componente principal que envolve inputs e addons.

PropTipoPadrão
classNamestring
<InputGroup>
  <InputGroupInput />
  <InputGroupAddon />
</InputGroup>

InputGroupAddon

Exibe ícones, texto, botões ou outro conteúdo ao lado dos inputs.

Navegação por foco: Para uma navegação por foco adequada, o componente InputGroupAddon deve ser posicionado depois do input. Defina a prop align para posicionar o addon.

PropTipoPadrão
align"inline-start" | "inline-end" | "block-start" | "block-end""inline-start"
classNamestring
<InputGroupAddon align="inline-end">
  <SearchIcon />
</InputGroupAddon>

Para <InputGroupInput />, use o alinhamento inline-start ou inline-end. Para <InputGroupTextarea />, use o alinhamento block-start ou block-end.

O componente InputGroupAddon pode ter múltiplos componentes InputGroupButton e ícones.

<InputGroupAddon>
  <InputGroupButton>Button</InputGroupButton>
  <InputGroupButton>Button</InputGroupButton>
</InputGroupAddon>

InputGroupButton

Exibe botões dentro dos input groups.

PropTipoPadrão
size"xs" | "icon-xs" | "sm" | "icon-sm""xs"
variant"default" | "destructive" | "outline" | "secondary" | "ghost" | "link""ghost"
classNamestring
<InputGroupButton>Button</InputGroupButton>
<InputGroupButton size="icon-xs" aria-label="Copiar">
  <CopyIcon />
</InputGroupButton>

InputGroupInput

Substituto para <Input /> ao construir input groups. Este componente tem os estilos de input group pré-aplicados e usa o data-slot="input-group-control" unificado para o tratamento do estado de foco.

PropTipoPadrão
classNamestring

Todas as outras props são repassadas para o componente <Input /> subjacente.

<InputGroup>
  <InputGroupInput placeholder="Digite o texto..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

InputGroupTextarea

Substituto para <Textarea /> ao construir input groups. Este componente tem os estilos de textarea group pré-aplicados e usa o data-slot="input-group-control" unificado para o tratamento do estado de foco.

PropTipoPadrão
classNamestring

Todas as outras props são repassadas para o componente <Textarea /> subjacente.

<InputGroup>
  <InputGroupTextarea placeholder="Digite a mensagem..." />
  <InputGroupAddon align="block-end">
    <InputGroupButton>Enviar</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Histórico de alterações

AnteriorInputPróximoInput OTP