shadcn.io is not affiliated with official shadcn/ui
Brief Builder with Budget Slider Contact Block for React
A freelance-marketplace brief with skill tags, a fixed or hourly budget slider, a timeline, and a published line that typical briefs get 6 replies in a day.
Installation
Overview
A brief builder for React with Base UI, for Craftbench Marketplace. The form asks for a title, an optional description, up to 6 skills as tags, a budget and a timeline, then a name and an email. Fixed and Hourly are a Segment Group: choosing one swaps the Slider's range, step and unit, and sets the amount back to that range's start. Under the slider a line reads "Typical briefs get 6 replies in a day", counted from a constant, not from the slider. Submitting checks the fields, shows each problem under its control and moves focus to the first one. A valid brief turns into a confirmation in the same space, repeating the title, the amount, the timeline, the email and the skills. The page's rails and top rule come from Guides. It's built from Field, Input, Textarea, Tags Input, Segment Group, Slider, Select, Shine Button, Button and Guides, with CSS for the header entrance and your theme's tokens for every colour. For marketplaces, studios and any page where a visitor posts a piece of work.
FAQ
Where does the brief go?
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: details holds the title, description, budget kind, amount, timeline, name and email, and skills holds the tags. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.
How do the skill tags work?
Type a skill and press Enter, or pick one of the suggestions under the field. The list stops at 6, from MAX_SKILLS, and a duplicate or an empty chip is turned away with a short note. At least one skill is required. The same Tags Input parts are used on every base.
What changes when the budget type changes?
Fixed runs from $500 to $20,000 in steps of $500 and starts at $4,000, labelled "for the whole project". Hourly runs from $25 to $250 in steps of $5 and starts at $80, labelled "for each hour". Switching type sets the amount back to that range's start, so a fixed price is never left sitting on an hourly scale. Only the active range is mounted, so the slider keeps a single thumb.
value is still a one-item array. onValueChange may receive a number or an array, and getAriaValueText receives the formatted text and then the number. The label sits inside the slider and is tied with aria-labelledby.
Does the slider change the replies line?
No. "Typical briefs get 6 replies in a day" is a published promise. The 6 is REPLIES. Moving the slider does not announce a new count, and the confirmation does not claim that 6 people have already replied.
How is the timeline select labelled?
The label above it names the control, and focus can land on it when the timeline is missing.
The trigger takes the id, and the label points to it with htmlFor.
Are the email address and phone number real?
No. hello@craftbench.example uses the .example domain, which is reserved for examples, and +1 (415) 555-0188 is in the 555-0100 to 555-0199 range set aside for fiction. Replace EMAIL, PHONE, PHONE_HREF and HOURS at the top of the file. The phone number keeps its order in a right-to-left layout.
Related
- Pro
Skill Tags Internship Contact
ApplicationsAn internship application with no frame: a band of three start seasons, a graduation date field, a weeks stepper and a tags field for skills with one-tap suggestions, checked on submit and confirmed in place.
- Pro
Offer and Ask Partnership Contact
Partners and creatorsA partnership proposal in a card in card: a company, a work email, a website that is checked for its shape and two tag lists side by side, what you bring and what you are looking for, shown back on confirmation.
- 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
Loan Payment Slider Contact
Finance and propertyA personal-loan request for a lender: an amount slider with a tick at each $5,000 and a term to pick, a panel that works the monthly payment out as you move, and a form that checks itself.
- Pro
Supplier Application Contact
ApplicationsA supplier application split in two: a code of conduct as a ruled list at the start, and at the end a form with a formatted tax ID, certification chips and a signature.
- Pro
Audience Index Influencer Contact
Partners and creatorsA creator enquiry in a compact frame: a switch between three kinds of channel, an audience slider with five named stops, and a readout of the tier and a typical rate per post, labelled as an example.