New in v0.1.5

React Hook Form

veloria-ui/rhf provides zero-boilerplate Controller wrappers for every Veloria UI form component. Requires react-hook-form ^7.0.0.

Installation

Install react-hook-form alongside veloria-ui:

bash

$npm install veloria-ui react-hook-form

Quick start

tsx

import { RhfInput, RhfSelect, RhfCheckbox } from "veloria-ui/rhf";
import { useForm } from "react-hook-form";
import { Button } from "veloria-ui";
 
type FormValues = {
  email: string;
  role: string;
  agree: boolean;
};
 
const roles = [
  { label: "Admin",  value: "admin" },
  { label: "Editor", value: "editor" },
  { label: "Viewer", value: "viewer" },
];
 
export function SignupForm() {
  const { control, handleSubmit } = useForm<FormValues>();
 
  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <RhfInput
        name="email"
        control={control}
        label="Email"
        type="email"
        rules={{ required: "Email is required" }}
      />
      <RhfSelect
        name="role"
        control={control}
        label="Role"
        options={roles}
      />
      <RhfCheckbox
        name="agree"
        control={control}
        label="I agree to the terms"
        rules={{ required: "You must agree to the terms" }}
      />
      <Button type="submit">Submit</Button>
    </form>
  );
}

Available wrappers

All wrappers accept name, control, label, and rules in addition to the original component props.

Component	Wraps
RhfInput	Text, email, number, password input
RhfTextArea	Multi-line textarea
RhfSelect	Single-value dropdown select
RhfCheckbox	Boolean checkbox with label
RhfSwitch	Boolean toggle switch
RhfRadioGroup	Option group with descriptions
RhfSlider	Single thumb range slider
RhfCombobox	Searchable single-value select
RhfMultiSelect	Multi-value chip select
RhfRatingInput	Star rating picker
RhfOTPInput	OTP / PIN code input

Full form example

Using multiple wrappers together in a realistic form:

tsx

import {
  RhfInput, RhfTextArea, RhfSelect, RhfSwitch,
  RhfRadioGroup, RhfSlider, RhfRatingInput,
} from "veloria-ui/rhf";
import { useForm } from "react-hook-form";
 
export function ProfileForm() {
  const { control, handleSubmit } = useForm({
    defaultValues: {
      name: "",
      bio: "",
      role: "",
      notifications: true,
      experience: "mid",
      skill: 50,
      satisfaction: 4,
    },
  });
 
  const experienceLevels = [
    { label: "Junior",  value: "junior" },
    { label: "Mid",     value: "mid" },
    { label: "Senior",  value: "senior" },
  ];
 
  return (
    <form onSubmit={handleSubmit(console.log)} className="space-y-4">
      <RhfInput       name="name"          control={control} label="Full name" />
      <RhfTextArea    name="bio"           control={control} label="Bio" />
      <RhfSelect      name="role"          control={control} label="Role" options={[]} />
      <RhfSwitch      name="notifications" control={control} label="Email notifications" />
      <RhfRadioGroup  name="experience"    control={control} label="Experience" options={experienceLevels} />
      <RhfSlider      name="skill"         control={control} label="Skill level" min={0} max={100} />
      <RhfRatingInput name="satisfaction"  control={control} label="Overall satisfaction" />
    </form>
  );
}

Validation

Pass a rules object to any wrapper — it is forwarded directly to react-hook-form'sController. Error messages render automatically below the field.

json

<RhfInput
  name="email"
  control={control}
  label="Email"
  type="email"
  rules={{
    required: "Email is required",
    pattern: {
      value: /^[^@]+@[^@]+.[^@]+$/,
      message: "Enter a valid email address",
    },
  }}
/>

Motion System Changelog