Field

A flexible form field component system with built-in label, description, error handling, and input grouping.

Basic Usage

The Field component provides a complete form field structure with label, description, and error handling.

Email address

We'll never share your email with anyone else.

Feedback

import { Field, FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldInput } from "@epilot/volt-ui"

<FieldSet className="flex flex-col w-96">
  <FieldGroup>
    <Field variant="highlight">
      <div className="flex items-center gap-2">
        <FieldLabel>Email address</FieldLabel>
        <FieldLabelContent>...</FieldLabelContent>
      </div>
      <FieldInput type="email" placeholder="tim@apple.com" />
      <FieldDescription>We'll never share your email with anyone else.</FieldDescription>
    </Field>
  </FieldGroup>

  <Field variant="highlight">
    <FieldLabel>Your message</FieldLabel>
    <FieldTextarea placeholder="Hello, how are you?" rows={5} />
  </Field>
</FieldSet>

Field Addons

Use FieldInputGroup and FieldGroupAddon to create input fields with addons (like icons or buttons) on either side.

Website

https://

Price

import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from "@epilot/volt-ui"

<FieldGroup>
  <Field variant="highlight">
    <FieldLabel>Website</FieldLabel>
    <FieldInputGroup>
      <FieldGroupAddon align="start">https://</FieldGroupAddon>
      <FieldInput type="text" placeholder="example.com" />
    </FieldInputGroup>
  </Field>

  <Field variant="highlight">
    <FieldLabel>Price</FieldLabel>
    <FieldInputGroup>
      <FieldGroupAddon align="start">$</FieldGroupAddon>
      <FieldInput placeholder="10.00" />
    </FieldInputGroup>
  </Field>
</FieldGroup>

Error State

Add the variant="destructive" prop to the Field component to show error styling.

Email address

Email address is required

import { Field, FieldLabel, FieldInput, FieldError } from "@epilot/volt-ui"

<Field className="w-96!" variant="destructive">
  <FieldLabel htmlFor="email">Email address</FieldLabel>
  <FieldInput id="email" type="email" aria-invalid="true" placeholder="tim@apple.com" />
  <FieldError>Email address is required</FieldError>
</Field>

API Reference

Field

The main container component that provides context for field inputs.

Prop	Type	Default	Description
`children`	React.ReactNode	-	The field content such as FieldLabel, FieldInput etc,.
`variant`	`"default"` \| `"highlight"` \| `"destructive"`	`"default"`	The variant of the field.

FieldSet

Container for grouping multiple field groups together.

Prop	Type	Default	Description
`children`	React.ReactNode	-	Multiple FieldGroup components.
`className`	string	-	Additional CSS classes.

FieldGroup

Container for grouping multiple fields together.

Prop	Type	Default	Description
`direction`	`"column"` \| `"row"`	`"column"`	The direction of the field group.
`children`	React.ReactNode	-	Multiple Field components.
`className`	string	-	Additional CSS classes.

FieldContent

Content wrapper for organizing field elements.

Prop	Type	Default	Description
`children`	React.ReactNode	-	Field content elements.
`className`	string	-	Additional CSS classes.

FieldLabel

Label component for the field. Extends the Label component.

Prop	Type	Default	Description
`children`	React.ReactNode	-	Label text.
`className`	string	-	Additional CSS classes.
`htmlFor`	string	-	The `id` of the associated form control.

FieldDescription

Description or help text for the field.

Prop	Type	Default	Description
`children`	React.ReactNode	-	Description text.
`variant`	`"default"` \| `"helper"`	`"default"`	Text color variant. Use "helper" for subtle gray text.
`className`	string	-	Additional CSS classes.

FieldError

Error message display component.

Prop	Type	Default	Description
`children`	React.ReactNode	-	Custom error message.
`errors`	Array<{ message?: string }> \| undefined	-	Array of error objects with optional message property.
`className`	string	-	Additional CSS classes.

Field Addons

FieldInputGroup

Container for grouping inputs with addons.

Prop	Type	Default	Description
`children`	React.ReactNode	-	FieldInput and FieldGroupAddon components.
`className`	string	-	Additional CSS classes.

FieldGroupAddon

Addon component for input groups (prefixes or suffixes).

Prop	Type	Default	Description
`align`	`"start"` \| `"end"`	`"start"`	Alignment of the addon (before or after input).
`children`	React.ReactNode	-	Addon content (text, icon, etc.).
`className`	string	-	Additional CSS classes.

Field

On this page