Componentes

Input Group

Input com prefixo, sufixo ou botão adjacente.

Campos e formulários

Carregando demonstração…

Código da demo
"use client";

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

export function Demo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-fe-3">
      <InputGroup>
        <InputGroupAddon>
          <InputGroupText>https://</InputGroupText>
        </InputGroupAddon>
        <InputGroupInput placeholder="finance.rafastos.com.br" />
      </InputGroup>
      <InputGroup>
        <InputGroupInput placeholder="0,00" />
        <InputGroupAddon align="inline-end">
          <InputGroupText>BRL</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}
Acessibilidade
Addons decorativos aria-hidden; botões com labels.
Importar
import { InputGroup, InputGroupInput, InputGroupAddon } from "@financeequity/ui/input-group"

Neste repositório:

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