Pieces/Form

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.