From f-rha-input
Use when the user wants to use, customize, or ask about the Input component from the f-rha library. Covers label, placeholder, controlled value, error messages, disabled state, and input types.
How this skill is triggered — by the user, by Claude, or both
Slash command
/f-rha-input:inputThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
A text input component with label and error message support.
A text input component with label and error message support.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label displayed above the input |
placeholder | string | "" | Placeholder text |
value | string | — | Controlled input value |
onChange | (e) => void | — | Change event handler |
type | string | "text" | HTML input type |
disabled | boolean | false | Disables the input |
error | string | — | Error message shown below the input |
import { Input } from "f-rha";
const [value, setValue] = useState("");
<Input
label="Email"
placeholder="[email protected]"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<Input
label="Password"
type="password"
value={value}
onChange={(e) => setValue(e.target.value)}
error="Password is required"
/>
npx claudepluginhub dio-chu/f-rha-marketplace --plugin f-rha-inputProvides a single-line text/number input component for SmartHR UI forms, with accessibility linting rules and usage guidelines.
Builds accessible forms with proper labeling, grouped controls, inline validation (aria-describedby/aria-errormessage), and error summaries linked to inputs.
Implements type-safe React forms with React Hook Form and Zod validation for schemas, field arrays, multi-step forms, nested validation, and error troubleshooting.