BrutalLab UI
es
EnglishEspañol
PrimitiveDisponible

Input Group

Campo de entrada con prefijos, sufijos y acciones alineadas.

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/input-group.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx
'use client';

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

export default function Demo() {
  return (
    <div className="grid w-full max-w-md gap-2">
      <Label htmlFor="website">Website</Label>
      <InputGroup>
        <InputGroupAddon>
          <InputGroupText>https://</InputGroupText>
        </InputGroupAddon>
        <InputGroupInput id="website" placeholder="example.com" />
        <InputGroupAddon align="inline-end">
          <InputGroupText>.com</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

  • Reposo, contenido, foco, error y deshabilitado. El error usa aria-invalid y un mensaje asociado; el color no es la única señal.
  • No se valida por pasar el cursor. Solo la aplicación decide cuándo mostrar errores.
  • Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

PropTipoDefaultDescripción
InputGroupAddon.aligninline-start / inline-end / block-start / block-endinline-startAddon position.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.