NavigationDisponible

Command

Lista de comandos con búsqueda, selección por teclado y estado vacío.

Choose an action.

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/command.json

Uso

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

tsx

'use client';

import { useState } from 'react';
import {
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
} from '@/components/ui/command';

export default function Demo() {
  const [result, setResult] = useState('Choose an action.');
  return (
    <div className="grid w-full max-w-md gap-4">
      <Command>
        <CommandInput placeholder="Find an action" />
        <CommandList>
          <CommandEmpty>No action found.</CommandEmpty>
          <CommandGroup heading="Workspace">
            <CommandItem onSelect={() => setResult('New document selected')}>
              New document
            </CommandItem>
            <CommandItem onSelect={() => setResult('Settings selected')}>
              Settings
            </CommandItem>
          </CommandGroup>
        </CommandList>
      </Command>
      <output className="bl-type-small">{result}</output>
    </div>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

Comprueba cerrado, abierto, opción resaltada, seleccionado y deshabilitado cuando el componente los admita.
Los diálogos y menús deben poder abrirse con teclado. Escape cierra los overlays no persistentes y devuelve el foco al disparador. Tooltip y Hover Card también deben mostrarse al enfocar.
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.

Prop	Tipo	Default	Descripción
CommandItem.onSelect	(value: string) => void	—	Runs the chosen action.

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.