DS | Adila.co
Componentes

Input Group

Componente input-group do design system adila.co.

https://

Instalação

bun add @adila-sh/ui

Uso

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
  InputGroupButton,
} from '@adila-sh/ui';
import { Search } from 'lucide-react';

export function Example() {
  return (
    <InputGroup>
      <InputGroupAddon>
        <Search />
      </InputGroupAddon>
      <InputGroupInput placeholder="Buscar componentes..." />
      <InputGroupAddon align="inline-end">
        <InputGroupButton>Copiar</InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  );
}

Use align no InputGroupAddon para posicionar addons: inline-start (padrão), inline-end, block-start e block-end. Para áreas de texto, troque InputGroupInput por InputGroupTextarea.

Dependências

  • class-variance-authority

Componentes relacionados

Nesta página