Field Component

Form field container that accommodates all form field types. Supports vertical/horizontal layout, full-width, borderless mode, dynamic sizing, and slots for label, content, control, note, and help.

Notes

Basic usage

Default (vertical)

Name:
note
Forgot?

With help text

Password:
At least 8 characters, letters and numbers
Forgot?

With note

Email:
We will not share your email

Layouts

Vertical (.field / .field-v)

Username:

Horizontal (.field-h)

Username:

Horizontal + full width (.field-h .field-full)

Username:

Horizontal + full + help

Password:
Forgot?

Dynamic width

.field-scale (1x input width)

Name:

.field-scale-2 (2x input width)

Address:

.field-scale-3 (3x input width)

Description:

.field-ratio (1x input height)

.field-ratio-3 (3x input height)

Code:

Borderless mode

Vertical borderless

Name:
Borderless inside custom container

Horizontal borderless + full

Name:

Borderless + shell

Search:
CTRL+K

With shell (room layout)

Vertical field

Room Type
Rooms
Halls
Baths
Form note
Required

Borderless room layout

Room Type
Rooms
Halls
Baths
Form note
Required

Use cases

Login form (vertical)

Email:
Password:
At least 8 characters
Forgot?

Login form (horizontal)

Email:
Password:
Forgot?

Registration form

Username:
3-20 characters, starts with a letter
Email:
Password:
At least 8 characters, letters and numbers