Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form blocks

Pro

Export Format Radio Form Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Explain each option as it is chosen with this radio list form for React with Base 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.

How do I connect it to react-hook-form or TanStack Form?

With react-hook-form, keep the format id as one string field and call field.onChange from each row's change handler; the button then reads the field to pick the file.
  • Pro

    Required Radio Choice Form

    A required delivery-speed radio group that starts with nothing chosen: three rows with their time and extra cost, a total that follows the pick, and an error on the group if you book without choosing.

  • Pro

    Starting Point Radio Cards Form

    Three whole-card radio choices for how a workspace starts (blank, from a template, imported from a file), each with an icon, a description and the time it takes, and a line that says what comes next.

  • Pro

    Layout Picker Radio Form

    A default project view picker with four radio tiles (list, board, calendar, timeline), each with a drawn thumbnail, and the chosen view redrawn large in a framed preview with what it is best for.

  • Pro

    Horizontal Radio Pills Form

    Two horizontal radio groups drawn as bordered pills, priority and reminder delay, that write one sentence together and warn when an urgent ticket is paired with a day-long reminder.

  • Pro

    Task Status Select Form

    Selects

    A required select of five task statuses, each with a glyph and a word, that moves a drawn task row to the status you choose once Move task is pressed.

  • Pro

    Review and Submit Form

    Dialogs and layouts

    A review step: three sections of typed answers that each edit in place in the same boxes, a side cell of what changed, a Submit that names the section to finish, and a lock after a local submit.

All 42 form blocks