shadcn.io is not affiliated with official shadcn/ui
Field Type Menu Navbar Block for Vue
A form-builder navbar with an Add field menu of nine field types, an Edit and Preview control, and a Publish button that goes through Publishing to Live with a copyable link.
Installation
Overview
A field-type-menu navbar for Vue with Ark UI, the bar of Fieldmoor, a form builder. The wordmark leads, then the form's name with where it stands (Draft, Previewing or Live) and how many fields it holds. An Add field menu lists nine field types; choosing one adds it to the form, up to twelve, and a last row removes the latest. An Edit and Preview control switches the mode, and Preview pauses adding. Publish, the Shine Button, reads Publishing with a spinner for a moment, and then its cell shows Live with a Copy button for the form's link and an Unpublish button; Publish waits for at least one field. Every change is spoken in a polite line and nothing leaves the page. On a phone the words give way to icons. The block stays 56 pixels high, and the dividers meet the page's top rule with a plus. It's built from Dropdown Menu, Segment Group, Shine Button, Button, Copy Button, Spinner, Status and Guides, with your theme's tokens for every colour. For form, survey and quiz builders whose header is what's in the form and whether it's out.
FAQ
How do I change the field types and the limit?
Edit FIELD_TYPES (an id, a label and an icon each) and MAX_FIELDS at the top. START_FIELDS is what the form holds when the page loads, by type id. The count, the polite lines and the menu's disabled state all read the same list of fields, so they can't disagree. Nothing is stored.
What does Publish really do?
It changes a phase in state: draft, publishing for a moment (PUBLISH_MS), then live. Nothing is published, and the polite line says "Live in this demo. Nothing was published." Replace publish and the timer with your own request, and move to live when it answers. Copy puts LINK on the clipboard for real; point it at your form. Unpublish goes back to a draft.
Where does focus go?
Choosing a field type or removing a field returns focus to the Add field button, as keyboard users get from the menu itself. When Publish turns into Live, focus follows to Unpublish, but only if it was still on Publish (or nowhere); if you've moved on, it stays where you put it. Unpublish returns focus to Publish.
How does it work with a keyboard?
Add field opens its menu with Enter, Space or the Down arrow; the arrow keys move between types, Enter chooses and Escape closes. The Edit and Preview control is a radio group: the arrow keys move between the two and select. Publish stays in the tab order while it waits (it is marked disabled with aria-disabled, not removed), so focus never falls off.
How does it fit on a phone?
The form's name hides below sm, and the wordmark is its icon below lg. Add field, the Edit and Preview control, Publish and Unpublish show icons, with the words kept for screen readers. The Publish cell always holds the width of the Live layout, so the bar doesn't shift when the form goes live. Nothing wraps and the bar is 56 pixels at every width.
What moves, and what happens with reduced motion?
Nothing moves on load. The menu fades and grows from its button, and appears instantly under reduced motion; the Publishing spinner turns, and stands still beside the word Publishing under reduced motion. A band of light sweeps across Publish once on hover and focus (it fades in place under reduced motion).