CompositionDisponible

Word Input Group

Campos por palabra con navegación de teclado, pegado distribuido y feedback individual.

Space: next word. Enter: check. Paste a phrase to distribute it.

Try “Good morning”. The example supplies validation; the component handles focus and input only.

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/word-input-group.json

Uso

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

tsx

"use client";
import { useState } from "react";
import { WordInputGroup } from "@/components/ui/word-input-group";
export default function Demo() {
  const [values, setValues] = useState(["Good", ""]);
  const [checked, setChecked] = useState(false);
  return <div className="grid gap-4">
    <WordInputGroup values={values} fields={values.map((word, i) => ({ id: String(i), length: i ? 7 : 4,
      status: checked ? word.toLowerCase() === ["good", "morning"][i] ? "correct" : "incorrect" : "idle" }))}
      onChange={(next) => { setValues(next); setChecked(false); }} onSubmit={() => setChecked(true)} lang="en" />
    <p className="bl-type-small">Try “Good morning”. The example supplies validation; the component handles focus and input only.</p>
  </div>;
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

La composición hereda los estados de sus controles. Prueba valores vacíos, contenido, carga y error cuando correspondan a la aplicación.
Los ejemplos de esta página son ejecutables; el código mostrado usa los mismos componentes. La lógica de negocio pertenece al consumidor.
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
fields / values	WordInputField[] / string[]	See example	Controlled visual state and input values.
onChange / onSubmit	callbacks	See example	The consumer validates and persists responses.
onActiveIndexChange / ref	callback / WordInputGroupHandle	See example	Observe active input or focus a specific word.
labels / lang / disabled	object / string / boolean	See example	Localize instructions and label each field.

Accesibilidad

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

Traduce las etiquetas y conserva el foco visible de teclado.

El feedback incluye texto además de color. La validación y la persistencia pertenecen al consumidor.