Input
Collect a short text value with labels, validation and accessible feedback.
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