Field

The Field component system provides a comprehensive set of building blocks for creating consistent form layouts. It includes containers for field sets, groups, labels, descriptions, errors, and separators — all with proper spacing and typography. Built with React Native's View and Text components and class-variance-authority.

Preview

Email address

We'll never share your email.

Installation

npx novaui-cli add field

Import

import {
  Field,
  FieldLabel,
  FieldTitle,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldSet,
  FieldLegend,
  FieldSeparator,
} from 'novaui-components'

Basic Usage

A simple labeled field with an input and description:

Username

This will be your public display name.

import { Field, FieldLabel, FieldContent, FieldDescription } from 'novaui-components'
import { Input } from 'novaui-components'

export function BasicField() {
  return (
    <Field>
      <FieldLabel>Username</FieldLabel>
      <FieldContent>
        <Input placeholder="Enter your username" />
        <FieldDescription>This will be your public display name.</FieldDescription>
      </FieldContent>
    </Field>
  )
}

Orientation

Vertical (Default)

Fields stack the label above the input:

Full name

<Field orientation="vertical">
  <FieldLabel>Full name</FieldLabel>
  <FieldContent>
    <Input placeholder="John Doe" />
  </FieldContent>
</Field>

Horizontal

The label sits beside the input in a row layout:

Full name

<Field orientation="horizontal">
  <FieldLabel>Full name</FieldLabel>
  <FieldContent>
    <Input placeholder="John Doe" />
  </FieldContent>
</Field>

With Error

Display validation errors below the input:

Please enter a valid email address.

<Field>
  <FieldLabel>Email</FieldLabel>
  <FieldContent>
    <Input placeholder="you@example.com" value={email} onChangeText={setEmail} />
    <FieldError errors={[{ message: 'Please enter a valid email address.' }]} />
  </FieldContent>
</Field>

FieldSet and FieldGroup

Organize multiple fields into logical groups:

Personal Information

First name

Last name

import {
  FieldSet, FieldLegend, FieldGroup,
  Field, FieldLabel, FieldContent,
} from 'novaui-components'
import { Input } from 'novaui-components'

export function FieldSetExample() {
  return (
    <FieldSet>
      <FieldLegend>Personal Information</FieldLegend>
      <FieldGroup>
        <Field>
          <FieldLabel>First name</FieldLabel>
          <FieldContent>
            <Input placeholder="John" />
          </FieldContent>
        </Field>
        <Field>
          <FieldLabel>Last name</FieldLabel>
          <FieldContent>
            <Input placeholder="Doe" />
          </FieldContent>
        </Field>
      </FieldGroup>
    </FieldSet>
  )
}

FieldSeparator

Add a visual divider between form sections, optionally with a label:

Phone

<View>
  <Field>
    <FieldLabel>Email</FieldLabel>
    <FieldContent>
      <Input placeholder="you@example.com" />
    </FieldContent>
  </Field>
  <FieldSeparator>or</FieldSeparator>
  <Field>
    <FieldLabel>Phone</FieldLabel>
    <FieldContent>
      <Input placeholder="+1 (555) 000-0000" />
    </FieldContent>
  </Field>
</View>

Props API

FieldProps

Extends React.ComponentPropsWithoutRef<typeof View> and VariantProps<typeof fieldVariants>:

Prop	Type	Default	Description
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	Layout direction of label and input
`className`	`string`	-	Additional CSS classes

FieldLabelProps

Extends React.ComponentProps<typeof Label>:

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for the label

FieldTitleProps

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

FieldDescriptionProps

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

FieldErrorProps

Prop	Type	Default	Description
`errors`	`Array<{ message?: string }>`	-	Array of error objects to display
`children`	`React.ReactNode`	-	Custom error content (overrides `errors`)
`className`	`string`	-	Additional CSS classes

FieldSetProps

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for the field set container

FieldLegendProps

Prop	Type	Default	Description
`variant`	`'legend' \| 'label'`	`'legend'`	Typography size — `legend` uses `text-base`, `label` uses `text-sm`
`className`	`string`	-	Additional CSS classes

FieldGroupProps

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for the group container

FieldSeparatorProps

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Optional label text displayed over the divider line
`className`	`string`	-	Additional CSS classes

Best Practices

Always use labels: Every form input should have a FieldLabel for accessibility
Add descriptions for complex fields: Use FieldDescription to provide helpful context or formatting hints
Show errors inline: Place FieldError directly below the input for immediate feedback
Group related fields: Use FieldSet and FieldLegend to organize forms into logical sections
Consistent orientation: Use the same orientation across a form section for visual consistency

Use with Input, Textarea, Select, Checkbox, and Switch for form controls
Combine with Button for form submission
Use Separator independently for non-form content dividers

Continue reading

Getting Started Components Overview Popular: Dialog SEO Playbook

Field

Continue reading

On this page