Input
Component used for collecting data from users
Preview
Usage
import { z } from 'zod';
import { AutoForm } from '@vitnode/core/components/form/auto-form';
import { AutoFormInput } from '@vitnode/core/components/form/fields/input';const formSchema = z.object({
username: z.string().min(3, "Username must be at least 3 characters"),
email: z.email("Please enter a valid email address"),
});<AutoForm
formSchema={formSchema}
fields={[
{
id: "username",
component: props => (
<AutoFormInput
{...props}
description="This is the username for your application. It should be unique and not shared with anyone."
label="Username"
/>
),
},
{
id: "email",
component: props => (
<AutoFormInput
{...props}
description="We'll use this email to contact you."
label="Email Address"
/>
),
},
]}
/>import { Input } from '@vitnode/core/components/ui/input';<Input />Multi-language
Set the multiLang prop to collect the value in every enabled language. The
field renders a language select (shown only when more than one language is
enabled) that switches which language you are editing - it does not change
the app-wide locale, only the value inside this input.
The value becomes an array matching the core_languages_words table, one entry
per language you edited:
[
{ languageCode: "en", value: "Category" },
{ languageCode: "pl", value: "Kategoria" },
];Declare the field with the multiLangValueSchema helper so the schema matches
the array shape (its minLength / maxLength apply to each language's value):
import { multiLangValueSchema } from "@vitnode/core/lib/helpers/multi-lang";
const formSchema = z.object({
name: multiLangValueSchema({ minLength: 1, maxLength: 255 }).min(1),
});{
id: "name",
component: props => <AutoFormInput {...props} label="Name" multiLang />,
}On the backend, persist the array with saveLanguageWords - it fills the
remaining core_languages_words columns. See
Auto Form - Multi-language fields.
Props
Prop
Type