Source

Command Palette

Search for a command to run...

Field

Container for organizing form fields with labels and descriptions.

About Field

A wrapper that provides consistent spacing and orientation for form field elements. Supports vertical, horizontal, and responsive layouts for organizing labels, inputs, and helper text.

Installation

Import the Field component from LSD:
import { Field } from '@nipsys/lsd'

export default function MyComponent() {
  return <Field />
}

Usage

The simplest form of the component with default styling.
Basic

Variants

Component variants for different visual styles and use cases.
Horizontal

Features

Additional features and capabilities of the component.
Error

Legend Description

Composition

Field
├── FieldLabel
├── FieldDescription
├── FieldContent
├── FieldError
├── FieldSet
│ └── FieldLegend
├── FieldGroup
├── FieldTitle
└── FieldSeparator

API Reference

Field

orientation
Layout orientation for the field elements.
Type: FieldOrientation

FieldGroup

className
Additional CSS class names.
Type: string

FieldSet

disabled
Disables all form controls within the fieldset.
Type: boolean

FieldLegend

className
Additional CSS class names.
Type: string

FieldDescription

className
Additional CSS class names.
Type: string

FieldLabel

htmlFor
ID of the form control this label is associated with.
Type: string

FieldContent

className
Additional CSS class names.
Type: string

FieldSeparator

className
Additional CSS class names.
Type: string

FieldError

children
Custom error message content to display.
Type: React.ReactNode
errors
Array of error messages or error objects to display.
Type: (string | ErrorItem)[]

FieldTitle

className
Additional CSS class names.
Type: string

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Tab - Navigate through form fields• Shift + Tab - Navigate to previous form field
ARIA Attributes
Proper ARIA attributes for screen readers
• role="group" is added to Field for grouping related controls• aria-label is set on FieldLabel when htmlFor is not provided• role="alert" is used on FieldError for error announcements
Focus States
Visible focus indicators for keyboard users
• Field components follow standard HTML form semantics. Focus moves through form controls in document order. FieldSet and FieldLegend keep related controls grouped for keyboard navigation.
Form