Input

Single-line text for names or short answers.

Preview

Username *

This is your public display name.

Usage

<FormField
          control={form.control}
          name="username"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Username</FormLabel>
              <FormControl>
                <Input 
                placeholder="Enter your username"
                
                type="text"
                maxLength={255}
                {...field}
                value={typeof field.value === "string" || typeof field.value === "number" ? field.value : ""}
                onChange={(event) => field.onChange(event.target.value)} />
              </FormControl>
              <FormDescription>This is your public display name.</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />

Details

Copy this field block into a React Hook Form setup and swap the demo content for your own schema and labels.

form-builder/components/ui/input.tsx