FieldWrapper

Form field container with label and error handling.

formwrappervalidation

Import

import { FieldWrapper } from "@/components/ui";

Basic Usage

FieldWrapper Preview

We'll never share your email.

Username

Username is already taken.

Code

tsx

<FieldWrapper label="Username">
  <Input placeholder="Enter username" />
</FieldWrapper>

Required Field

Show required indicator

1<FieldWrapper label="Email" required>
2  <Input type="email" placeholder="you@example.com" />
3</FieldWrapper>

With Description

Add helper text

1<FieldWrapper
2  label="Password"
3  description="Must be at least 8 characters"
4  required
5>
6  <Input type="password" />
7</FieldWrapper>

With Error

Show validation error

1<FieldWrapper
2  label="Email"
3  error="Please enter a valid email address"
4>
5  <Input type="email" error />
6</FieldWrapper>

Complete Form Example

Full form with validation

1<form className="space-y-4">
2  <FieldWrapper label="Name" required>
3    <Input placeholder="John Doe" />
4  </FieldWrapper>
5  <FieldWrapper
6    label="Email"
7    required
8    error={errors.email}
9  >
10    <Input type="email" error={!!errors.email} />
11  </FieldWrapper>
12  <FieldWrapper
13    label="Bio"
14    description="Tell us about yourself"
15  >
16    <Textarea rows={4} />
17  </FieldWrapper>
18  <Button type="submit">Submit</Button>
19</form>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring