shadcn.io is not affiliated with official shadcn/ui
Assistive Sign-in Profiles Account Block for Vue
Four assistive sign-in profiles as native radio cards (Standard, Screen reader, Motor and Cognitive), each listing three changes, over a list of what changes from Standard with the old and new value, a count, a saved tag and a Reset.
Installation
Overview
Let people pick how signing in works for them, and show exactly what that changes, with this assistive sign-in panel for Vue with Ark UI. A hairline frame with a plus mark on each corner holds two bands. The first is four profile cards in one row of shared hairlines, a native radio group: Standard, Screen reader, Motor and Cognitive, each with its name, a line about who it is for and the three things it changes, and the saved one wears a tag. The second answers the question that follows a choice, what changes from Standard, as a list of settings with the value they have now, an arrow and the value the profile gives them; the count of differing settings is derived from that list. The foot has a Shine Button that saves the profile in this page only and an outline Button that resets the draft to Standard. It's built from native radio inputs, Badge, Button, Shine Button and Guides, with a CSS entrance only. For the account or security page of any app that offers a sign-in built for assistive technology.
FAQ
How do I change the profiles and the settings they change?
Edit the constants at the top. FACETS lists each setting once, with its label and the value Standard gives it. Each entry in PROFILES lists its changes as a facet, a few words for the card and the value it sets. The cards and the diff are both written from that one list, and the counts are derived, so adding a change to a profile updates its card, its diff and its count together.
Why are the cards native radio inputs?
Because that is what a one-of-four choice is, and a native radio group gives the keyboard everything for free: Tab enters the group, the arrow keys move the choice, and a screen reader says "Screen reader, 2 of 4". The input is hidden visually but stays in the page; the card is its label, so the whole card is the click target, and the focus ring is drawn on the card. Each input is named by the card's heading and described by its line and its list.
Why does the diff keep its height when I change profile?
Because Standard has no changes, and the three profiles have different numbers of lines with different lengths. The diff sits in a box that is as tall as the longest case, with Standard's explanation inside the same box, so choosing a profile never moves the foot or the Save button under the pointer.
What stays local, and how do I make it real?
All of it. Save keeps the profile in this page, moves the Saved tag to it and says "Saved Motor in this demo. Nothing is stored." Reset to Standard only changes the draft, so you still save it. To make it real, send the profile id from the save handler to your API, apply each facet in your sign-in flow (the longer code lifetime, the one-step layout, the email link) and read the saved id back into saved.
Is it accessible, and how does it look on a phone?
The group has a hidden legend, the saved profile is announced in the card's description and not only drawn, the arrows in the diff are decoration with the word "becomes" read in their place, and the foot is a polite live region. On a phone the four cards stack in one column and the diff goes below them; the foot with Save stays pinned to the bottom of the screen.