Components
Field
Form field wrapper combining label, input, description, and error message.
Field
A form field wrapper that combines label, input control, description text, and error message into a consistent layout.
Import
import { Field, FieldLabel, FieldDescription, FieldError } from '@mks2508/mks-ui/react';Basic Usage
Basic Usage
We'll never share your email.
.tsx
<Field>
<FieldLabel>Email</FieldLabel>
<Input type="email" placeholder="user@example.com" />
<FieldDescription>We'll never share your email.</FieldDescription>
</Field>With Error
With Error
Password must be at least 8 characters.
.tsx
<Field>
<FieldLabel>Password</FieldLabel>
<Input type="password" />
<FieldError>Password must be at least 8 characters.</FieldError>
</Field>Required Field
Required Field
.tsx
<Field required>
<FieldLabel>Username</FieldLabel>
<Input placeholder="Enter username" />
</Field>API Reference
| Component | Props | Description |
|---|---|---|
Field | required, className, children | Root wrapper with field context |
FieldLabel | className, children | Label text |
FieldDescription | className, children | Help text below input |
FieldError | className, children | Error message (styled destructive) |