Field Renderer

The Field Renderer component is a reusable wrapper for input fields within a form. It helps reduce repetitive code by abstracting commonly used form field structures into a separate, maintainable component. This promotes cleaner code and improves the overall organization of your form logic.

Test

How To Use

Using the Field Renderer component is simple. After installation, import the component and use it within the render function of the FormField component provided by shadcn/ui,
This helps streamline your form structure by centralizing the rendering logic of form fields into one consistent component.

Usage Restriction

This component is designed to be used exclusively within a FormField component. It will not function correctly outside of that context.

Install

Run the following command in your terminal to install the component:

Import

Use the following code to import FieldRenderer into any component:

import { FieldRenderer } from '@/components/ui/bloom/field-renderer';

Use

You can now easily use this component in your code.

<FormField
  control={form.control}
  name="username"
  render={({ field }) => (
    <FieldRenderer label="Username">
      <Input placeholder="username" {...field} />
    </FieldRenderer>
  )}
/>

If your form structure and styling remain consistent throughout the project, it's recommended to apply your custom styles directly within the Field Renderer component itself. This approach eliminates the need to repeatedly pass styling props every time you use it, making your code cleaner and more maintainable.

Preview

Open in

Accepted Props

This component supports all the props available to the FormItem component. In addition, it provides the following extra props:

Prop	Type	Default
`label?`	`React.ReactNode`	`custom component`
`description?`	`React.ReactNode`	`custom component`
`children`	`React.ReactNode`	-

Dependencies

Form: This component relies on the Form component from shadcn/ui for proper integration with form handling and submission. View Form Documentation