A booking form in a clay panel: date, time and party chips (they squish when picked) (native radios, each group in a fieldset with a legend, all required), contact fields and a submit button.
A booking form in a clay panel: date, time and party chips (they squish when picked) (native radios, each group in a fieldset with a legend, all required), contact fields and a submit button. Works without JavaScript; rest props (action, method) go on the <form>. Posts the fields by these names, whatever their labels say: date, time, party (when given), then each of fields. party is the one optional chip group: guests at a restaurant, a cake size, or the treatment or service at a clinic or salon (relabel it with labels.party; your endpoint still reads party).
It is part of Soft Bento. The style’s 92 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.
To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.
A booking form on a flat card: dates as a row of mono day keys (an ink key when chosen, struck through when full), time and party pill chips (native radios, each group in a fieldset with a legend, all required), contact fields and a full-width primary submit key.
A booking form: date, time and party chips in the segmented look (native radios, each group in a fieldset with a legend, all required), contact fields and a full-width primary submit button.
A booking form: date, time and party chips (native radios, each group in a fieldset with a legend, all required), contact fields and a submit button.