Ravox KitForms
Input
A text field with label, hint and error already wired to the input, an icon or prefix at the start and an action at the end (generate, copy, show password). Accepts React Hook Form's register() directly.
Letras, números e ponto. Dá para trocar depois.
Settings
Toggles
Installation
The command creates components/ui/input.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add inputProps
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | — | Text of the <label>. Without a label, pass aria-label. |
| hint | ReactNode | — | Help below the field, read together with it (aria-describedby). Hidden when there is an error. |
| error | ReactNode | — | Error message: paints the border, sets aria-invalid and is read together with the field. |
| icon | ReactNode | — | Icon or prefix at the start, inside the border (<Search />, "$", "https://"). |
| action | ReactNode | — | Action at the end, inside the border. Use <InputAction>. |
| passwordToggle | boolean | false | With type="password": button to show and hide the password. |
| size | "sm" | "md" | "lg" | "md" | Height: 32, 40 or 48px. The medium one uses 16px on mobile (no iPhone zoom). |
| wrapperClassName | string | — | Classes of the outer block; className goes on the <input>. |
| ...props | ComponentProps<"input"> | — | Everything an <input> accepts, including ref (React 19): {...register("email")} works. |