Input

Component used for collecting data from users

Shadcn UI

This component is part of Shadcn UI.

Usage

import { z } from 'zod';
import { AutoForm } from 'vitnode/components/form/auto-form';
import { AutoFormInput } from 'vitnode/components/form/fields/input';
const formSchema = z.object({
  username: z.string().min(3, 'Username must be at least 3 characters'),
  email: z.string().email('Please enter a valid email address'),
});
<AutoForm
  formSchema={formSchema}
  fields={[
    {
      id: 'username',
      component: props => (
        <AutoFormInput
          description="This is the username for your application. It should be unique and not shared with anyone."
          label="Username"
          {...props}
        />
      ),
    },
    {
      id: 'email',
      component: props => (
        <AutoFormInput
          type="email"
          description="We'll use this email to contact you."
          label="Email Address"
          {...props}
        />
      ),
    },
  ]}
/>

Props

PropTypeDefault
label?
string
-
description?
string
-
type?
string
text
placeholder?
string
-

On this page