Field

Composable form field components for building accessible forms with labels, controls, and help text.

Basic Field

A simple field with label, input, and description.

Enter your email address

Horizontal Orientation

Fields can be laid out horizontally with label and input side-by-side.

This will be your public display name.

FieldSet with Legend

Group related fields with FieldSet and FieldLegend.

Personal Information

Error State

Fields can display validation errors.

Field Separator

Separate sections with FieldSeparator.


or continue with

With FieldTitle

Use FieldTitle for checkbox/radio groups.

Get weekly updates on new features and promotions.

Accessibility

  • FieldSet renders semantic <fieldset> for grouping
  • FieldLegend renders <legend> for group labels
  • Field uses role="group" for accessibility
  • FieldError uses role="alert" for screen readers
  • Labels are properly associated with inputs via for/id
Open Markdown
FreeField

Form layout, labels, descriptions, and errors.

Install with the Proa CLI
proa ui add field

Installs the reviewed component source, dependencies, shared support files, and required legal notices.

CLI and registry setup
recipe.rs
// SPDX-FileCopyrightText: 2026 Proa Labs, Inc.
// SPDX-License-Identifier: MIT OR Apache-2.0

//! Field recipe — typed root orientation and named compound slots.

use crate::tw_join;
use proa_core::shared::attr_value::AttrValue;
use proa_core::{DataLoader, WebContext, WriteBuf, WriteError};

/// Field layout orientation.
#[derive(Debug, Clone, Copy, Default, PartialEq, Eq, Hash, proa_macros::ProaVariant)]
#[variant(name = "orientation")]
pub enum FieldOrientation {
    #[default]
    Vertical,
    Horizontal,
    Responsive,
}

impl FieldOrientation {
    pub const fn as_str(self) -> &'static str {
        match self {

Search

Type at least 2 characters

Customize

Make it yours

Palette

Radius

Overview
Components
Settings

Build your own

Themed Proa UI surface

Preview
Components52
RecipesTyped
customer-portal