Pieces

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.

Labeled-tick slider with a primary fill, a value pill in the header, and the active tick bolded.

Row of round color swatches where the selected one picks up an outer contrast ring.

Open-state select showing the focused control and the flyout list with one option muted as chosen.

Inline field with an autosave status pill that shifts between saved, saving, and unsaved dot colors.

Searchable people picker with a focused search input above a list that tints the selected row.

Font-size slider with discrete tick dots under the rail and a mono value chip in the header.

Click-to-edit field that toggles between a plain value with a hover pencil and an input flanked by save and cancel buttons.

Read-only value with an optional mask toggle and a copy button that flips to an emerald Copied state on click.

Legal consent card with a custom checkbox, inline underlined policy links, and a red asterisk when required.