arkyn
ChangelogGuides
arkyn
docs / components / field

Field

The Field family composes custom form field blocks. FieldWrapper is the structural container that arranges label, control, and error content, FieldLabel renders the form label with an optional required-field indicator, and FieldError displays validation messages.

tsx

import { FieldWrapper } from "@arkyn/components/fieldWrapper";
import { FieldLabel } from "@arkyn/components/fieldLabel";
import { FieldError } from "@arkyn/components/fieldError";
Learn how subpath and root imports differ in How do I use imports.

CSS Imports

Each of these subpaths also exposes a matching stylesheet, so you can import only the CSS this component family needs:

tsx

import "@arkyn/components/fieldWrapper.css";
import "@arkyn/components/fieldLabel.css";
import "@arkyn/components/fieldError.css";

Basic Usage

tsx

<FieldWrapper>
    <FieldLabel htmlFor="username">Username</FieldLabel>
    <Input name="username" />
    <FieldError>This field is required</FieldError>
</FieldWrapper>

Orientation

Use orientation on FieldWrapper to control how field elements are arranged.

tsx

<FieldWrapper orientation="vertical">
    <FieldLabel htmlFor="vertical-example">Vertical</FieldLabel>
    <Input name="vertical-example" />
</FieldWrapper>


<FieldWrapper orientation="horizontal">
    <FieldLabel htmlFor="horizontal-example">Horizontal</FieldLabel>
    <Input name="horizontal-example" />
</FieldWrapper>

Required Indicator

Enable showAsterisk on FieldLabel to display a required-field marker.

tsx

<FieldLabel htmlFor="email" showAsterisk>
    Email Address
</FieldLabel>

Conditional Rendering

Render FieldError only when an error exists.

tsx

{error && <FieldError>{error}</FieldError>}

Custom Class Names

Every part of the family accepts className for spacing and style overrides.

tsx

<FieldWrapper className="custom-spacing" orientation="horizontalReverse">
    <FieldLabel htmlFor="password" className="custom-label" showAsterisk>
        Password
    </FieldLabel>
    <Input name="password" type="password" />
    <FieldError className="custom-error">
        Password must have at least 8 characters
    </FieldError>
</FieldWrapper>

Built-in Form Integration

Already included in form components
Form components such as Textarea, Input, and other field-based controls already use FieldWrapper, FieldLabel, and FieldError internally when the label and errorMessage props are provided. You usually only need to compose them manually when building custom field layouts.

tsx

<Textarea
    name="bio"
    label="Biography"
    showAsterisk
    errorMessage="Biography is required"
    placeholder="Tell us about yourself"
/>

Properties

FieldWrapper

children - ReactNode Elements that compose the field structure, usually label, control, and error message.
orientation - "vertical" | "horizontal" | "horizontalReverse" (default: "vertical") Layout orientation for elements rendered inside the wrapper.
className - string Additional CSS classes merged into the base class.
...rest - HTMLAttributes<HTMLElement> Any other valid HTML attributes for the root section element.

FieldLabel

showAsterisk - boolean (default: false) Whether to display an asterisk (*) to indicate a required field.
className - string Additional CSS classes merged into the base class.
...rest - LabelHTMLAttributes<HTMLLabelElement> Any other valid HTML attributes for the root label element.

FieldError

children - ReactNode Error content rendered inside the component. If no children are provided, nothing is rendered.
className - string Additional CSS classes merged into the base class.
...rest - HTMLAttributes<HTMLElement> Any other valid HTML attributes for the root strong element.
Related in Fields & Data Display
On this page