shadcn.io is not affiliated with official shadcn/ui
Eligibility Checklist Scholarship Contact Block for Vue
A scholarship application on a card in card: four eligibility criteria as ruled checkbox rows with a verdict line, an essay with a word count that fills a bar toward its minimum, and a form that checks itself and confirms in place.
Installation
Overview
A scholarship application for Vue with Ark UI, on a card in card: a muted shell with + marks on its corners wraps a raised panel, under a start-aligned header. The panel opens with eligibility, four criteria as ruled checkbox rows (each with a line on what it means) and a verdict line under them: "Not yet" with how many are met, then "You qualify" when all four are ticked. Beside it, behind a hairline, sits the essay: a text area with a word count that fills a bar toward 250 words (a tick marks the minimum) and calls the count in range up to 500, then a name, an email and the apply button. The button reads as unavailable until all four criteria are ticked; pressing it anyway says so and moves focus to the first unticked criterion. A complete application replaces the name, the email and the button with a confirmation, takes focus, and leaves the criteria and the essay in view, locked. The page's rails and top rule come from the Guides spine. It's built from Frame, Checkbox, Field, Textarea, Progress, Status, Input, Guides, Button and Shine Button, with CSS transitions for the entrance and your theme's tokens for every colour. For scholarship funds, grant programmes, bursaries and any application with rules the applicant should check first.
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 a call to your application system: details (name, email, essay) and ticked (the criteria the applicant confirmed) hold everything. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.
How do I change the criteria?
Edit CRITERIA at the top of the file: each entry is a title, a detail and an id. The verdict line, the "N of N criteria met" count and the gate on the button all follow the length of the list, so four can become three or five. The fund, the $4,000 award and its rules are made up and marked as an example in the header.
Why does the apply button look unavailable but still react?
The button uses aria-disabled rather than disabled, so it stays in the tab order and a screen reader can reach it and hear why ("Tick all four criteria to apply"). Pressing it while a criterion is missing does not send anything: it shows the problem under the list and moves focus to the first unticked box. Everything else (a short essay, a missing email) is reported in the same pass, in the order it appears on the page.
How is the word count worked out?
The text is trimmed and split on whitespace, so a run of spaces or a line break counts once. The bar is Progress with a maximum of 500 and a tick at 250; under 250 the count reads "N more to reach 250", from 250 to 500 it reads "Within the range" with a success dot, and over 500 it says by how many. The count is linked to the text area with aria-describedby, so it is read when the field is focused, not on every keystroke. Change MIN_WORDS and MAX_WORDS to suit your rules; the tick is placed from them.