shadcn.io is not affiliated with official shadcn/ui
Risk Profile Allocation Contact Block for Svelte
A portfolio inquiry for an advisory firm: a risk slider over five named profiles that redraws a stacked bar of stocks, bonds and cash at full width, then a short inquiry form on ruled bands.
Installation
Overview
A portfolio inquiry section for Svelte with Ark UI, laid out on ruled bands under a start-aligned header. The first band is a risk slider over five named profiles (Cautious, Steady, Balanced, Growth, Bold), each name a button under the track that moves the slider there. The second redraws a stacked bar at full width in three foreground tones (stocks, bonds, cash) as the profile changes, with the mix as a list of figures and two example numbers beside it: an example year and an example rough year. The third is the inquiry: a portfolio size in a Select, what the money is for in a group of choice cards, a name and an email. Submitting checks every field, shows each problem under its field and moves focus to the first one; a valid request turns the third band into a confirmation while the profile stays where it is. A last band holds the contact details. It's built from Slider, Select, Radio Group, Field, Input, Guides, Button and Shine Button, with your theme's tokens for every colour. For advisory firms, wealth managers and robo-advisers.
FAQ
Where do the numbers under the bar come from?
From two small tables at the top of the file. PROFILES holds each profile's mix (every one adds to 100), and TYPICAL and ROUGH hold an example yearly result for each kind of holding (7% for stocks, 3.5% for bonds and 1.5% for cash in a typical year; a 32% fall for stocks and a 7% fall for bonds in a rough one). A profile's two numbers are the mix times those results. They are made up for the demonstration, the block says so under the bar, and they are not advice or a forecast. Swap in your own method, or remove the two numbers.
How does the slider work with a keyboard and a screen reader?
It moves one profile at a time with the arrow keys; Home and End go to Cautious and Bold. The thumb is named "Risk profile" and a screen reader hears the profile's name as its value. Each profile name under the track is a real button in a group called "Risk profiles", so it also works by tap or Tab and Enter. When a change ends, one hidden status line reads the profile, its mix and its two numbers; nothing is announced while you drag.
Is the bar readable without seeing it?
The bar is a picture of the list beside it, so it is hidden from assistive technology and the list carries the figures as text: each holding, its swatch and its share. The three tones are the text colour at full, half and a fifth of its strength, so they follow your theme, and the bar always reads left to right, even in a right-to-left layout. With reduced motion the segments change size at once.
How does the form check what's typed?
The form has noValidate, so the browser's own bubbles stay away and the block shows its own messages. On submit, problems checks a portfolio size, a goal, a name and an email address with an @ and a domain. Each problem appears under its field with an icon and focus moves to the first one; the select, the inputs and the group of goals are marked invalid and described by the message. Leaving a filled field checks it, and editing a field that shows an error re-checks it as you type.
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 your own call: details holds the profile, the portfolio size, the goal, the name and the email. The confirmation repeats the profile with its mix, the size and the goal and says an adviser will write to the address given; it promises nothing else.
How does it fit on a phone?
The bands stack and every figure keeps its place. The five profile names fit across 320 pixels under the track, the two example numbers sit side by side under the list, and the inquiry's two columns become one: the portfolio size, the name and the email, then the goals and the button.