shadcn.io is not affiliated with official shadcn/ui
Field Hints Form Block for Vue
A set-up-your-show form with five hint styles on five fields: an always-on description, a format example, a live address preview, a character budget and a note that appears on focus.
Installation
Overview
Help people fill a field in the way that fits it with this field hints form for Vue with Ark UI. A compact header over a hairline frame with a plus mark on each corner introduces five rows with the label and its hint at the start and the control at the end, each row naming its hint style. Show name has an always-on description. Feed address shows a format example in code and removes the spaces from what you paste. Slug previews the address it will make as you type. Description keeps a character budget that turns bold near the limit. Contact email has a note that appears when the field has focus, in space that is reserved and always tied to the input. Save show checks the show name, feed address and email, and focuses the first problem. The Shine Button is the only colored control. It is built from Input, Textarea, Label, Shine Button and Guides. For settings and set-up forms where a field has a format, a limit or a consequence worth saying.
FAQ
Which hint style should I use for which field?
Use an always-on description when the field's purpose is unclear from its label. Use a format example in code when there is one right shape. Use a live preview when the value becomes something visible, like an address. Use a budget when there is a limit. Use a note on focus for reassurance that only matters at the moment of typing, like how an email will be used. Avoid using a placeholder for any of them: it disappears when typing starts.
Are the hints available to screen readers?
Every hint has an id and is listed in its input's aria-describedby, together with the error line when there is one. The focus note is always in the page and only its opacity changes, so a screen reader hears it on arrival whether or not it is visible. The style names beside the labels are decorative and hidden from assistive technology.
Why does nothing move when the note on focus appears?
Its height is reserved by a minimum height, and only its opacity changes. The same holds for the error line under every control: it is always rendered at one line, so an error replaces empty space instead of pushing the next row down.
What does the feed field do with what I paste?
It removes all whitespace as the value changes, since a feed address never contains any and copied text often carries a trailing space or newline. The hint says so. Save show then checks that what is left looks like a full web address.
What stays local, and how do I connect it for real?
Save show says "Saved in this demo. Nothing sent." and keeps the values on screen. To make it real, post the values from the submit handler once the three checks pass. The slug preview is a hint, not a check, so ask your server whether the slug is free and show the answer in the same line.