shadcn.io is not affiliated with official shadcn/ui
Export Format Radio Form Block for Svelte
An export format list (CSV, JSON, plain text) whose chosen row opens to show what it is best for, the real size of this file and how it keeps headers, with an Export button that downloads the file.
Installation
Overview
Explain each option as it is chosen with this radio list form for Svelte with Ark UI. A compact header sits over a hairline frame with a plus mark on each corner. A band holds three export formats (CSV, JSON and Plain text) as rows on rules, each with a drawn radio, a title, a line and its file extension at the end. The row chosen opens, with a short height transition that stands still under reduced motion, to three facts: what the format is best for, the size of this very file in bytes and how it keeps the headers. The size is counted from the text the button will save, built in the browser from five typed rows of a harvest log, with fields quoted where they need it. The foot holds the Shine Button, wrapped in a download trigger, so Export saves a real file in the format chosen. The radios are native, so the arrow keys move the choice. It's built from native radios, a Download Trigger, Shine Button and Guides, with a CSS entrance only. For export dialogs, report formats, delivery methods and any list where each option needs a line of explanation.
FAQ
How do I export my own rows?
Replace ROWS with your data and adjust HEAD and cells. csvOf, jsonOf and textOf each build the file from those, and PICKS lists the formats with their MIME type. The size shown is counted from the same text, so it always matches the download.
How does the CSV avoid breaking in a spreadsheet?
Any field with a comma, a quote or a line break is wrapped in quotes with inner quotes doubled; the first crop in the sample, "Cherry tomatoes, early", shows it. Rows end with a carriage return and a line feed. If your data can start with an equals sign, a plus, a minus or an at sign, prefix it with an apostrophe so a spreadsheet reads it as text.
How does it work with a keyboard and a screen reader?
The rows are one radio group named by its heading. Tab enters the group and the arrow keys move the choice; each radio is described by its line. The facts of the open row are a plain description list that is hidden, and not reachable, while its row is closed. The status line announces the size on each choice and the file name after an export.
How does it look on a phone?
The rows keep their full-width layout, with the extension at the end and the facts below; long values wrap rather than truncate. The foot is pinned to the bottom of the screen with Export at full width.
What stays local, and how do I connect it for real?
The file is built in the tab from the typed rows and saved by the browser; nothing is sent anywhere. To export your own dataset, build the text from your records on the client for small sets, or ask your server for the file and point the trigger at its URL for large ones.