Forms

React Hook Form.

Optional bindings for the form state already in your application.

LIVE PREVIEWTry it. It works.

Install the source

npx shadcn@latest add https://ui.bld8.dev/r/react-hook-form.json

Registry setup · Open the playground

Usage

import { RHFField, RHFControl } from "@bld8/ui/react-hook-form";

<RHFField control={form.control} name="name" label="Name">
  {field => <Input {...field} />}
</RHFField>
<RHFControl control={form.control} name="tags">
  {binding => <MultiSelect {...binding} label="Tags" options={options} />}
</RHFControl>

In the workspace or ZIP starter, import components from @bld8/ui and include @bld8/ui/styles.css once. Registry installations use your local bld8/ source path. Wrap overlays in UIProvider.

API & behaviour

Optional peer integration: install react-hook-form when using this subpath. RHFField links native input labels and field errors. RHFControl binds value, onValueChange, onBlur, inputRef, disabled and error to label-owning controls such as Select, MultiSelect and DatePicker. Rules, control, defaultValue and shouldUnregister follow useController. Define explicit empty defaults; normal RHF Controller/register remain supported. The integration guide includes a runnable HTTP-backed example.

RHFField

RHFField public properties
Prop	Type	Default
`children`Required	`(field: ControllerRenderProps<T, N>) => ReactNode`	`—`
`label`Required	`string`	`—`
`name`Required	`N`	`—`
`control`	`Control<T, any, T> \| undefined`	`—`
`defaultValue`	`PathValueImpl<T, N> \| undefined`	`—`
`disabled`	`boolean \| undefined`	`—`
`exact`	`boolean \| undefined`	`—`
`hint`	`string \| undefined`	`—`
`required`	`boolean \| undefined`	`—`
`rules`	`Omit<RegisterOptions<T, N>, "disabled" \| "valueAsNumber" \| "valueAsDate" \| "setValueAs"> \| undefined`	`—`
`shouldUnregister`	`boolean \| undefined`	`—`

RHFControl

RHFControl public properties
Prop	Type	Default
`children`Required	`(binding: RHFControlBinding<T, N>) => ReactNode`	`—`
`name`Required	`N`	`—`
`control`	`Control<T, any, T> \| undefined`	`—`
`defaultValue`	`PathValueImpl<T, N> \| undefined`	`—`
`disabled`	`boolean \| undefined`	`—`
`exact`	`boolean \| undefined`	`—`
`rules`	`Omit<RegisterOptions<T, N>, "disabled" \| "valueAsNumber" \| "valueAsDate" \| "setValueAs"> \| undefined`	`—`
`shouldUnregister`	`boolean \| undefined`	`—`

Tables come from the public TypeScript declarations. Related types are shown alongside their component. A dash means no default is declared at the public function boundary.

Notes to self

Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.