Field
A form field wrapper that associates a label, description, and error message with an input.
'use client';
import { Field, FieldLabel } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
export function FieldDefault() {
return (
<div>
<Field>
<FieldLabel>Email</FieldLabel>
<Input type='email' placeholder='Enter your email' />
</Field>
</div>
);
}
Installation
Usage
import {
Field,
FieldDescription,
FieldError,
FieldLabel,
} from "@/components/ui/field"<Field>
<FieldLabel>Email</FieldLabel>
<Input type='email' placeholder='Enter your email' />
<FieldDescription>We'll never share your email.</FieldDescription>
<FieldError>Please enter a valid email address.</FieldError>
</Field>Examples
With Description
This will be your public display name.
'use client';
import {
Field,
FieldDescription,
FieldLabel,
} from '@/components/ui/field';
import { Input } from '@/components/ui/input';
export function FieldWithDescription() {
return (
<div>
<Field>
<FieldLabel>Username</FieldLabel>
<Input placeholder='Enter your username' />
<FieldDescription className='my-0!'>
This will be your public display name.
</FieldDescription>
</Field>
</div>
);
}