Input

Shadcn UI

This component is part of Shadcn UI.

Preview

Usage

import { z } from 'zod';
import { AutoForm } from 'vitnode-frontend/form/auto-form';
import { AutoFormInput } from 'vitnode-frontend/form/fields/input';

const formSchema = z.object({
  username: z.string(),
});

<AutoForm
  formSchema={formSchema}
  fields={[
    {
      id: 'username',
      component: AutoFormInput, 
    },
  ]}
/>

With placeholder

<AutoForm
  formSchema={formSchema}
  fields={[
    {
      id: 'name',
      component: props => (
        <AutoFormInput {...props} placeholder="Type your name" />
      ),
    },
  ]}
/>

Number Input

const formSchema = z.object({
  count: z.coerce.number(), 
});

<AutoForm
  formSchema={formSchema}
  fields={[
    {
      id: 'count',
      component: props => <AutoFormInput {...props} type="number" />, 
    },
  ]}
/>

Date Input

const formSchema = z.object({
  start_day: z.coerce.number(), 
});

<AutoForm
  formSchema={formSchema}
  fields={[
    {
      id: 'start_day',
      component: props => <AutoFormInput {...props} type="date" />, 
    },
  ]}
/>

Preview

Usage

With placeholder

Number Input

Date Input

On this page