Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Body text
Small text
Blockquote

Button

Sizes
Variants
Effects

Badge

Sizes
Extra Small
Small
Default
Large
Variants
Default
Secondary
Destructive
Outline
Warning
Info
Success
Effects
Gradient
Bounce

Search

Switcher

Form

AutoForm Example

Automatically generate a form from a Zod schema.

Your favourite number between 1 and 10.

I agree to the .

We need your birthday to send you a gift.

Input Without Label

This example shows how to use AutoForm input without label.

Sub Object

Automatically generate a form from a Zod schema.

Controlled

This example shows how to use AutoForm in a controlled way.

Confirm Password

Refined schema to validate that two fields match.

API Example

The form select options are fetched from an API.

Loading...

Array support

You can use arrays in your schemas to create dynamic forms.

{}

AutoForm Dependencies

Create dependencies between fields.

Setting this below 18 will require parents consent.

Setting this to true will remove non-vegetarian food options.