shadcn.io is not affiliated with official shadcn/ui
Intent Router Nonprofit Contact Block for React
An "I want to" router for a charity: four radio tiles (donate, volunteer, partner, fundraise), and one form whose first fields change with the choice while the panel keeps its height.
Installation
Overview
A contact section for React with Base UI that routes a visitor by what they want to do. A compact header opens on a band of four tiles on shared hairlines that run from rail to rail, a 2x2 on a phone: Donate, Volunteer, Partner and Fundraise, each a radio with its own icon, a name and (from sm) a line. The chosen tile gets a foreground ring and a filled radio. Under it a tinted panel holds one form. Its first fields belong to the choice: an amount and a fund, hours a month and an area, an organisation and an idea, a goal and a plan; name and email are shared. The four sets sit in one grid cell, the unused ones hidden and inert, so the panel is as tall as the tallest and never jumps when you switch. The form checks only the chosen set on submit, shows each problem under its field, marks the control invalid and moves focus to the first one; a valid note turns into a confirmation that says what was asked, in the same space, with the tiles locked until you send another. It's built from Radio Group, Field, Number Input, Select, Input, Textarea, Guides, Shine Button and Button, with CSS transitions for the entrances and your theme's tokens for every colour. For charities and clubs that get four kinds of enquiry in one inbox.
FAQ
How do I add a fifth way to help?
Add an entry to INTENTS (its icon, name, line, heading, button and the names of its first fields), add a field set for it in the grid cell next to the other four (give it PANE, the hidden(...) helper and inert like them), and a problems function that checks its fields. Grid columns on the tile band are four from lg: change lg:grid-cols-4 if you have another number.
Why do the other sets leave space under them?
All four sets live in one grid cell so the panel keeps its height when you switch tiles, and the cell is as tall as the tallest set (Partner, with its idea box). The hidden sets are invisible and inert, so they can't take focus or be read out. If your sets are of very different heights, trim the tallest or accept the gap.
What happens to a problem when I change my mind?
Choosing another tile clears the problems shown, because they belonged to the set that just left. Submit checks the chosen set and the shared fields, in the order you see them, and moves focus to the first one that fails.
How does a screen reader follow the switch?
The tiles are a radio group named "I want to", each tile the label of its own radio. The form's heading changes with the choice ("Your gift", "Your time"…) and is a polite live region, and it names the form. The hidden sets are inert, so only the visible one is read.
Where does it send the note?
Nowhere yet. The submit handler waits 800 milliseconds, then shows the confirmation, which says what the visitor asked for ("your 4 hours a month with welcome desk"). Replace the timer in submit with a call that routes details by choice: gifts to finance, hours to your volunteer desk.
Related
- Pro
Amount Presets Donation Contact
Join and giveA donation card in card: amount presets in a 2x2 grid beside a custom amount, a monthly switch, an impact line that rolls with the amount, a card-fee box and a total the button repeats.
- Pro
Shift Picker Volunteer Contact
Events and datesA volunteer sign-up on ruled bands: four days of shift cells with spots left, skills as toggles, a commitment control and a form that confirms in place.
- Pro
Campaign Planner Fundraiser Contact
Join and giveA fundraising planner as a split: a goal, a length and four channels on one side, a live projection with a bar on the other, and a form that sends the plan to a coach.
- Pro
Choose a Person Contact
Contact formsA band of four people, each a radio cell with initials, role and reply time, that addresses the form below it: a form that names its recipient, checks itself and confirms in place.
- Pro
Priced Add-ons Sponsorship Contact
Partners and creatorsA sponsorship builder: four priced add-ons with the reach each adds, a live total that rolls, the campaign goal and a form that confirms in place.
- Pro
Subscribe or Write Contact
Join and giveA card in card with a switch between two real forms, subscribe (an email and how often) and write to us (name, email and message), that never changes size and confirms in place.