CompositionAvailable
Word Input Group
Controlled word fields with keyboard navigation, paste distribution and per-word feedback.
Installation
Add the component and its dependencies from the registry running on your computer.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/word-input-group.jsonUsage
Import the component into your project and keep the source code under your 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>;
}
States & interaction
Appearance, behavior and keyboard checks.
- The composition inherits its controls’ states. Test empty, content, loading and error cases where the application needs them.
- Examples on this page are runnable; the displayed code uses the same components. Business logic belongs to the consumer.
- Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.
API Reference
BrutalLab-specific properties. Native attributes are supported as well.
| Prop | Type | Default | Description |
|---|---|---|---|
| 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. |
Accessibility
Rules that should remain intact when adapting the component to a product.
Provide localized labels and preserve visible keyboard focus.
Feedback includes text, not color alone. The consumer owns validation and persistence.