Shadcn Tanstack Form

A custom registry for using Tanstack Form with Shadcn UI.

Text field example

Field props exampleA ReactNode label sibling prop

This is some description text and can be added to most fields with a prop.

A ReactNode field suffix prop

Number field example

Textarea field example

Select field example

Radio group field example

Fiat

Ferrari

Aston Martin

Mercedes

Checkbox field example

Switch field example

Phone field example

One time password (OTP) field example

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Password field example