drift design system logo

Drift Design System

Search
Search

Forms

DDS Form Inputs are designed to integrate well with form libraries such as react-hook-form

Why React Hook Form?

TL;DR Performance, Validation, and Type Safety + Great Docs ❤️

Performance

React Hook Form is more performant than most react form libraries because it embraces uncontrolled inputs and stops you component from rerender on every onChange event.

Validation

React Hook Form offers inline basic validation, but also supports custom validation using a Yup schema or other popular validation libraries. On top of that React Hook Form offers a intiuative API for handling error stats (see demo below).

Type Safety

React Hook Form (as of v7) is type-safe and will throw an error if you try to use or defined a field that doesn't exist on your form or if you try return a value from a form field that doesn't match the type you defined.

React Hook Form ❤️ DDS Demo

Errors in this form: