Input

PreviewCopy Anchor Link

UsageCopy Anchor Link

import { AutoForm } from '@vitnode/core/components/form/auto-form'
import { AutoFormInput } from '@vitnode/core/components/form/fields/input'
import { z } from 'zod'

const formSchema = z.object({
  username: z
    .string()
    .min(3, 'Usernames need at least 3 characters')
    .default(''),
})

<AutoForm
  formSchema={formSchema}
  fields={[
    {
      id: 'username',
      component: (props) => (
        <AutoFormInput {...props} label="Username" autoComplete="username" />
      ),
    },
  ]}
/>

StatesCopy Anchor Link

Set aria-invalid for the error style and disabled to dim it. type="file" gets a styled picker button. Wrap it in a Field for the label, description and error.

<Input aria-invalid aria-describedby="email-error" id="email" type="email" />

AddonsCopy Anchor Link

Pass InputGroupAddon children to AutoFormInput and it renders an Input Group: icons, prefixes, buttons.

<AutoFormInput {...props} label="Search">
  <InputGroupAddon>
    <Search />
  </InputGroupAddon>
</AutoFormInput>

Multi-languageCopy Anchor Link

multiLang collects one value per enabled language. A language select appears inside the input when there's more than one.

import { multiLangValueSchema } from '@vitnode/core/lib/helpers/multi-lang'

const formSchema = z.object({
  name: multiLangValueSchema({ minLength: 1, maxLength: 255 }).min(1),
})

<AutoFormInput {...props} label="Name" multiLang />

The value is { languageCode, value }[]. See Auto Form - Multi-language fields for saving it.

PropsCopy Anchor Link

AutoFormInput also accepts every native <input> prop.