Input Field

npx shadcn@latest add @shuip/rhf-input-field

pnpm dlx shadcn@latest add @shuip/rhf-input-field

bun x shadcn@latest add @shuip/rhf-input-field

'use client';

import type { Lens } from '@hookform/lenses';
import { InfoIcon } from 'lucide-react';
import type * as React from 'react';
import { useController } from 'react-hook-form';
import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '@/components/ui/input-group';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';

export interface InputFieldProps extends Omit<React.ComponentProps<typeof InputGroupInput>, 'value' | 'onChange'> {
  lens: Lens<string>;
  label?: string;
  description?: string;
  tooltip?: React.ReactNode;
}

export function InputField({ lens, label, description, tooltip, ...props }: InputFieldProps) {
  const { field, fieldState } = useController(lens.interop());

  return (
    <Field className='gap-2' data-invalid={fieldState.invalid}>
      {label && <FieldLabel htmlFor={field.name}>{label}</FieldLabel>}
      <InputGroup>
        <InputGroupInput
          {...field}
          {...props}
          id={field.name}
          value={field.value ?? ''}
          aria-invalid={fieldState.invalid}
        />
        {tooltip && (
          <InputGroupAddon align='inline-end'>
            <Tooltip>
              <TooltipTrigger render={<InputGroupButton aria-label='Info' size='icon-xs' />}>
                <InfoIcon />
              </TooltipTrigger>
              <TooltipContent>{tooltip}</TooltipContent>
            </Tooltip>
          </InputGroupAddon>
        )}
      </InputGroup>
      {fieldState.invalid && <FieldError className='text-xs text-left' errors={[fieldState.error]} />}
      {description && <FieldDescription className='text-xs'>{description}</FieldDescription>}
    </Field>
  );
}

The command is the same for Base UI and Radix: the CLI reads the style in your components.json and installs the matching variant.

InputField is a text input component that encapsulates React Hook Form's field management with shadcn/ui's design system. It handles all the boilerplate of connecting form state to an input element: wiring event handlers, displaying errors, managing touched states, and rendering consistent UI.

The field binds to the form via a typed lens from @hookform/lenses — no call-site generic, just lens.focus('fieldName') with full autocomplete from your form's value type.

For numeric inputs, use NumberField instead.

Built-in features

Typed lens binding: lens.focus('name') autocompletes from your form's value type — no <MyForm> generic at the call site
Tooltip integration: optional InfoIcon button with tooltip content via tooltip prop
InputGroup ready: built on shadcn InputGroup for seamless addon integration
Zod validation: native integration with react-hook-form and Zod via resolver

Setup

Field components bind via @hookform/lenses. Create a lens once per form:

import { useLens } from '@hookform/lenses';
import { useForm } from 'react-hook-form';
import { InputField } from '@/components/ui/shuip/react-hook-form/input-field';

const form = useForm<MyForm>({ defaultValues: { email: '' } });
const lens = useLens({ control: form.control });

<form onSubmit={form.handleSubmit(onSubmit)}>
  <InputField lens={lens.focus('email')} label='Email' />
</form>

Less boilerplate

React Hook Form's standard approach uses render props to access field state:

<Controller
  control={form.control}
  name="email"
  render={({ field, fieldState }) => (
    <Field data-invalid={fieldState.invalid}>
      <FieldLabel htmlFor={field.name}>Email</FieldLabel>
      <Input {...field} id={field.name} aria-invalid={fieldState.invalid} placeholder="your@email.com" />
      <FieldDescription>Your email address</FieldDescription>
      {fieldState.invalid && <FieldError errors={[fieldState.error]} />}
    </Field>
  )}
/>

With InputField, this reduces to a single declarative component:

<InputField
  lens={lens.focus('email')}
  label="Email"
  description="Your email address"
  placeholder="your@email.com"
/>

Examples

Email

'use client';

import { useLens } from '@hookform/lenses';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { InputField } from '@/components/ui/shuip/react-hook-form/input-field';
import { SubmitButton } from '@/components/ui/shuip/submit-button';

const zodSchema = z.object({
  email: z.email({ message: 'Invalid email' }),
});

type Values = z.infer<typeof zodSchema>;

export default function InputFieldExample() {
  const form = useForm<Values>({
    defaultValues: { email: '' },
    resolver: zodResolver(zodSchema),
  });
  const lens = useLens({ control: form.control });

  async function onSubmit(values: Values) {
    try {
      alert(`Hello ${values.email}`);
    } catch (error) {
      console.error(error);
    }
  }

  return (
    <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
      <InputField
        lens={lens.focus('email')}
        type='email'
        label='Email'
        description='Your email'
        placeholder='john@example.com'
      />
      <SubmitButton>Check</SubmitButton>
    </form>
  );
}

Default

'use client';

import { useLens } from '@hookform/lenses';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { InputField } from '@/components/ui/shuip/react-hook-form/input-field';
import { SubmitButton } from '@/components/ui/shuip/submit-button';

const zodSchema = z.object({
  name: z.string().nonempty({ message: 'Name is required' }),
});

type Values = z.infer<typeof zodSchema>;

export default function InputFieldExample() {
  const form = useForm<Values>({
    defaultValues: { name: '' },
    resolver: zodResolver(zodSchema),
  });
  const lens = useLens({ control: form.control });

  async function onSubmit(values: Values) {
    try {
      alert(`Hello ${values.name}`);
    } catch (error) {
      console.error(error);
    }
  }

  return (
    <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
      <InputField lens={lens.focus('name')} label='Name' description='Your name' placeholder='John' />
      <SubmitButton>Check</SubmitButton>
    </form>
  );
}

Tooltip

'use client';

import { useLens } from '@hookform/lenses';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { InputField } from '@/components/ui/shuip/react-hook-form/input-field';
import { SubmitButton } from '@/components/ui/shuip/submit-button';

const zodSchema = z.object({
  name: z.string().nonempty({ message: 'Name is required' }),
});

type Values = z.infer<typeof zodSchema>;

export default function InputFieldExample() {
  const form = useForm<Values>({
    defaultValues: { name: '' },
    resolver: zodResolver(zodSchema),
  });
  const lens = useLens({ control: form.control });

  async function onSubmit(values: Values) {
    try {
      alert(`Hello ${values.name}`);
    } catch (error) {
      console.error(error);
    }
  }

  return (
    <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
      <InputField
        lens={lens.focus('name')}
        label='Name'
        description='Your name'
        placeholder='John'
        tooltip='This is a tooltip where you can put some text'
      />
      <SubmitButton>Check</SubmitButton>
    </form>
  );
}

Validation

'use client';

import { useLens } from '@hookform/lenses';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { InputField } from '@/components/ui/shuip/react-hook-form/input-field';
import { NumberField } from '@/components/ui/shuip/react-hook-form/number-field';
import { SubmitButton } from '@/components/ui/shuip/submit-button';

const zodSchema = z.object({
  username: z
    .string()
    .min(3, 'Username must be at least 3 characters')
    .regex(/^[a-zA-Z0-9_]+$/, 'Only letters, numbers, and underscores allowed'),
  email: z.string().email('Invalid email format'),
  age: z.number().min(18, 'Must be at least 18 years old').max(120, 'Age must be realistic'),
});

type Values = z.infer<typeof zodSchema>;

export default function RhfInputFieldValidationExample() {
  const form = useForm<Values>({
    defaultValues: { username: '', email: '', age: 0 },
    resolver: zodResolver(zodSchema),
  });
  const lens = useLens({ control: form.control });

  async function onSubmit(values: Values) {
    try {
      alert(`User: ${values.username}\nEmail: ${values.email}\nAge: ${values.age}`);
    } catch (error) {
      console.error(error);
    }
  }

  return (
    <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
      <InputField
        lens={lens.focus('username')}
        label='Username'
        description='Username will be used for your profile'
        placeholder='Enter username'
      />

      <InputField
        lens={lens.focus('email')}
        type='email'
        label='Email'
        description='We will send confirmation to this email'
        placeholder='your@email.com'
      />

      <NumberField
        lens={lens.focus('age')}
        label='Age'
        description='You must be 18 or older to register'
        placeholder='25'
      />

      <SubmitButton>Register</SubmitButton>
    </form>
  );
}

Props

Prop

Type