Orvain UI

Field group

Actions that only make sense against what is in the field they are welded to.

Get Pro to installPro10 blocksReact, Vue and Figma
MCPConnect the MCP server
Both sides · connected

What this customer is charged on each renewal.

$
Tax is added at checkout.Seat 12 of 25
Two buttons · connected
Members sign in at this address.
Separated · error

More in Button Group blocks#

Button group

Two to six peer options answering one question, where the choice changes a setting rather than the page

Button group, split

A toolbar over a view: step through time, change the range and create in one control

Button group, toggles

Formatting controls that act on a selection: several styles, one alignment, one size

Pagination bar

A group that walks through an ordered set: pages, steps, results

Field group

Actions that only make sense against what is in the field they are welded to

Field group, follows

A field whose welded action depends on whether the value has been edited

Field group, period

An amount that can be read in two periods without leaving the field

Billing panel

A settings panel that commits: say what a change costs and when it applies before it is saved

Billing panel, plan

Choosing a plan and a number of seats in one place, with the receipt in view

Billing panel, next invoice

Terms that change what the customer is billed: edit them and read the invoice they produce

When to use#

  • Two to six peer options answering one question, where the choice changes a setting rather than the page.
  • A filter row where several can be on at once and the spacing has to say so before anyone clicks.
  • Actions that only make sense against what is in the field beside them: copy a link, pick a date, set a currency.
  • An ordered walk through a set where moving forward deserves more weight than the steps between.

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.

Open in BlocksSee plans