Bollard UI

Implementation guide

Add React field validation without changing your UI library

Use a headless field hook with shadcn/ui, HeroUI, or a custom control while retaining your existing markup, styles, and accessibility decisions.

The mistake this stops

Adding validation forces a team to replace the controls and design system it already owns.

Async-safe field state, accessible error wiring, and typed failure reporting while the control remains yours.

Read the useBollardField component docs for its live preview, API, accessibility notes, dependencies, and limitations.

Install the component

pnpm dlx shadcn@latest add https://bollard-ui.vercel.app/r/use-bollard-field.json

Use it safely

  1. Install the hook and connect value, blur, and aria props to your existing control.
  2. Use your current validator or schema adapter for the rule itself.
  3. Map server errors back with setError and keep the server as the source of truth.