shadcn.io is not affiliated with official shadcn/ui
Weekly Plan Fitness Contact Block for React
An intro-session request for a gym with a plan that draws itself: a goal as four choice cards, a level, sessions a week, and a framed week whose days light up and whose readout says '3 sessions, 50 minutes'.
Installation
Overview
An intro-session request for React with Base UI, split by a hairline that meets the page's top rule with a + mark. At the start, a compact header and the form: a goal as four choice cards (strength, endurance, mobility, weight loss) that are one radio group, a level in a segmented control, how many sessions a week in a number field, a name and an email. At the end, a framed "Your week": a strip of seven days where the number of sessions lights that many, spread across the week, each bar as tall as the session; the goal and level set the length, and the readout says it in words ("3 sessions, 50 minutes") with the week's total underneath. Submitting checks every field, shows each problem under its field and moves focus to the first one; a valid request turns into a confirmation in the same space. It's built from Radio Group, Segment Group, Number Input, Field, Input, Frame, Guides, Shine Button and Button, with your theme's tokens for every colour. For gyms, studios, coaches and any form where a few choices add up to something the visitor can see.
FAQ
Where does the form send its data?
Nowhere yet. The submit handler waits 800 milliseconds as a stand-in for a request, then shows the confirmation. Replace that timer in submit with your own call (your front desk, a CRM or a form endpoint): details holds the goal, the level, the sessions, the name and the email. The confirmation only repeats what the visitor chose and promises no reply time.
How is the week worked out?
Each goal in GOALS has a session length in minutes at the intermediate level, and each level in LEVELS adds or takes away minutes (beginner 10 less, advanced 10 more). SPREAD lists which days carry the sessions for one to seven a week, so three sessions fall on Monday, Wednesday and Friday. The bars, the readout, the totals under them and the confirmation all read from the same numbers. The lengths are examples: replace them with your own classes.
What happens if someone types more than seven sessions?
The week shows nothing for a number outside 1 to 7 and the readout says "Not set", and submitting shows "Enter a number of sessions from 1 to 7" under the field with focus on it. The steppers stop at the limits.
How does the form check what's entered?
The form has noValidate, so the block shows its own messages. On submit, problems checks that a goal and a level are chosen, the sessions are 1 to 7, and the name and email are filled in (the email needs an @ and a domain). Each problem appears under its field with an icon, the control gets aria-invalid and an aria-describedby, and focus moves to the first one, which can be the first goal card. Choosing a card or typing clears its message. No goal or level is chosen to begin with, so a visitor always makes the choice.
How does the week work for a screen reader?
The strip of days is a drawing with one name, for example "Sessions on Monday, Wednesday, Friday", and the readout above it is a polite live region, so a change is read out once. The drawing itself is hidden from assistive technology and holds nothing to focus.
How does it fit on a phone?
Below lg the split stacks: the header, the form straight away, then the week under it. The goal cards stay two across and drop their one-line descriptions under 416 pixels, the level and sessions go one per row, and the submit button goes full width. Nothing scrolls sideways at 320 pixels. The header and the form fade up once on load; with reduced motion they simply appear.
Related
- Pro
Talk to Sales Contact
Contact formsA talk-to-sales split for a scheduling platform: what happens next as three numbered steps and a band of contact details beside a form that checks itself, shows each problem under its field and confirms in place.
- Pro
Stylist Booking Contact
Visits and servicesA salon booking that starts with the person: three stylists in hairline cells, each with their next three openings as chips, a live appointment line, and a form that checks itself and confirms in place.
- Pro
Treatment Menu Tabs Contact
Visits and servicesA day spa treatment menu: pill tabs over radio cells for massage, facial and body treatments, add-ons as checkbox cells, a running total and a form that checks itself and confirms in place.
- Pro
Request a Callback Contact
Calls and meetingsA callback request with a status band and a form that asks when to ring: as soon as possible, later today from a select of 15-minute times, or on a chosen day, with a time zone.
- Pro
Pricing With Calculator
CalculatorsA receipt that prices itself, for a webhook-delivery service: number steppers for seats, events and days of history drive a live bill that stamps the cheapest plan and itemises what goes past its allowance.
- Pro
Birthday Room Childcare Contact
Visits and servicesA place request for a day nursery in a card in card: a birthday in a segmented date field names the room the child belongs in, and five day toggles price the week at example rates.