shadcn.io is not affiliated with official shadcn/ui
Language Pair Quote Contact Block for React
A translation quote request where a band of two searchable languages with a swap button sets the rate, and a word count and a turnaround write an example price and delivery day.
Installation
Overview
A translation quote for Parleywick, a fictional translation agency, built for React with Base UI. A band across the top holds the language pair: two searchable lists of sixteen languages with a swap button between them, and a pair of the same language is refused. Under it a Number Input takes the word count and a Segment Group chooses Standard or Rush. At the end of that band a quote in a Data List shows the rate per word, the words, a delivery day and the total, all worked out from what was typed. Name and email come last. Submitting checks every field, shows each problem under its field, moves focus to the first one, and then says in a status line what the form noted and that nothing is sent in this demo. It's built from Combobox, Number Input, Segment Group, Data List, Field, Input, Guides, Shine Button and Button, with a CSS entrance on the header and your theme's tokens for every colour.
FAQ
Where does the quote request go?
Nowhere. The submit handler checks the fields and shows a status line saying what it noted, and that nothing is sent in this demo. Replace the setDone call in submit with your own request: details holds the pair, the word count, the name and the email, and turn the turnaround.
How is the example price worked out?
Each language has a tier from 1 to 3. The rate per word is 9, 12 or 16 cents for the harder language of the pair, plus 2 cents when neither language is English. The total is words times rate, 50 percent more for Rush, with a minimum order of $25.00. The figures are invented and labelled as examples, not an offer.
Where does the delivery day come from?
Standard is 3 business days and Rush is 1, plus one more business day for every 5,000 words past the first batch. The days are counted from a fixed example order on Monday, November 2, 2026, skipping weekends, and the block says so. It never reads the visitor's clock.
How does the language pair behave?
Choosing the same language twice is allowed while typing and refused on submit, with the message under the second list. The swap button exchanges the two and clears both messages, and a polite hidden line announces the new pair. Each list is a searchable input with the list under it; typing narrows it and choosing a language fills the field.
What counts as a valid word count?
A whole number from 1 to 50,000. The field groups digits as you leave it, and the plus and minus buttons move one word at a time, so typing is the quick way. Anything else shows the message under the field on submit.
How does it fit on a phone?
Below md the language band stacks into two rows with the swap button on a row of its own, its arrows turned to point up and down, and the quote follows the fields. The fields never move when an error appears, because every field keeps a one-line slot for its message. quotes@parleywick.example and +1 (212) 555-0173 are fictional.
Related
- Pro
Placement Fee Estimate Contact
Quotes and estimatesA staffing-agency form that estimates a placement fee from the hire type, the rate and the number of seats, and labels the figure as an example.
- Pro
Priced consultation length Contact
Calls and meetingsA consultation request for an advisory firm, with a 15, 30 or 60 minute choice that sets the price and the questions the call will cover.
- Pro
Talk catalogue Contact
Calls and meetingsA speaker request that starts with a catalogue of four talks, then a form that carries the chosen talk, the audience size and the event date.
- Pro
Budget Range Slider Contact
Quotes and estimatesA roofing quote request as a card in a card: three kinds of job, a two-thumb budget slider that says in words what the range covers, and a short form that checks itself.
- Pro
Resume Drop Contact
ApplicationsA robotics hiring form that starts with a single PDF dropzone, then a role combobox, a start date and an optional LinkedIn field.
- 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.