Pieces/Form

Standard text field with a label on top and a muted helper line under the control.

Invalid field with a rose ring, alert icon inside the input, and a descriptive error under it.

Validated field with an emerald ring, check mark, and a confirming note beneath.

Labeled input flanked by a red asterisk and a Required pill, plus an explanatory hint below.

Input that sandwiches a value between a muted prefix and suffix for URLs, currencies, or domains.

Focused input with the label shrunk to the top-left corner and a blinking caret after the value.

Multi-line field with a character counter that turns amber near the limit and rose past it.

Two inputs arranged side by side on a responsive grid for first/last names and paired fields.

Bordered card bundling a legend, description, and a short stack of related inputs.

Joined input and dark action button sharing a border, typical for invite, subscribe, or apply flows.

Six-cell verification code field with an active cell that rings and a caret on the next empty slot.

Password field with a four-segment meter underneath that shifts color and label with strength.

Masked password input with a caps-lock alert pill and an eye button that flips visibility.

Free-form tagger that wraps committed tokens as removable chips and shows a placeholder slot at the end.

Inline @-mention typed into a field, paired with an avatar-led autocomplete dropdown beneath.

Picker that keeps chosen options as removable violet pills next to a chevron to open the list.

Bulk invite field that tokenizes addresses into chips and flags invalid ones with a rose tint.

Searchable single-select with a query bar above a filtered list and a check for the active row.

Phone field with a flag and dial-code chooser on the left, then the national number in mono.

Popover with a header label, filter bar, and a selectable person list that checks chosen rows.

Setting row with label, supporting copy, and a sliding switch that turns emerald when on.

Legend-headed list of notification toggles with filled primary checks and muted helper lines.

Radio-card list where the selected row picks up a primary ring and a tinted background.

Pill-grouped segmented control with inset muted track and a raised card under the active choice.