arca-ui

Field

Form field components styled with the Tinted Trays theme. FieldSet acts as a tray container, while individual fields are styled as capsules.

Basic Field

A simple field with label, input, and description.

This is how your name will appear on your profile.

Field with Error

Field showing validation error state with styled error message.

FieldSet with Legend

A fieldset acts as a tray container grouping related fields together.

Personal Information

Fill in your personal details below. All fields are required.

We will never share your email with anyone else.

With Separator

Use separators to divide sections within a fieldset.

Account Settings
Security

Password must be at least 8 characters long.

Multiple Errors

FieldError can display multiple validation errors as a list.

Nested Groups

Field groups can be nested for complex form layouts.

Billing Address

Complete Form

A complete form example with all field components working together.

Create Account

Enter your information to create a new account.

Use 8+ characters with a mix of letters, numbers, and symbols.

Accept terms and conditions

By checking this box, you agree to our Terms of Service and Privacy Policy.