shadcn.io is not affiliated with official shadcn/ui
Editor Options Side By Side Switch Form Block for React Aria
Eight code-editor options as switches in two columns beside a drawn code sample that reacts live: line numbers, relative numbers, word wrap, a minimap, whitespace dots, indent guides, a current-line highlight and fold arrows.
Installation
Overview
Show what a setting does while it is being set with this editor options form for React with React Aria. A compact header sits over a hairline frame with a plus mark on each corner. Eight options of a browser code editor sit in two columns on shared hairlines, each an icon, a name and a Switch. Beside them, on a phone under them, a drawn code sample (ten lines of greyscale bars) answers every switch at once: Line numbers draws the gutter, Relative numbers changes its text to the distance from the current line, Word wrap folds the long line onto a second row, Minimap draws a strip at the end, Show whitespace draws dots, Indent guides draw rules, Highlight current line shades line 5 and Folding arrows add chevrons in the gutter. A caption under the sample says what the last switch did. The sample has a fixed height, so folding a line never moves the page. The foot counts unsaved changes beside a Shine Button to save them and an outline Button to discard them. It's built from Switch, Button, Shine Button and Guides, with a CSS entrance only. For editor and IDE settings, reader and viewer preferences, and any settings screen where a drawing explains the choices better than a sentence.
FAQ
How is the sample drawn?
CODE is a typed list of ten lines, each with an indent level and a list of bar widths. Editor reads the list of switches that are on and draws each row with a small CodeRow: the gutter if Line numbers is on, indent cells with a rule each if Indent guides is on, a dot in each gap if Show whitespace is on. The whole drawing is aria-hidden: the switches and the caption carry the meaning.
How does Word wrap work without the page jumping?
The long sixth line carries a wrapAt index. With wrap off it is drawn as one row that is clipped at the edge; with wrap on it is drawn as two rows and the second has no number. The editor has a fixed height with the overflow hidden, so the extra row never moves what is below it.
How do I add an option?
Add an entry to OPTIONS with an icon, a name and the two sentences the caption uses, then read its id in Editor, CodeRow or Bars where it should change the drawing. The count in the first band is derived from the list, so the "of 8" follows once you update it.
How does it look on a phone?
The switches come first, in one column, then the sample. Each cell is a stretched hit area, so a whole row can be pressed. The foot is pinned to the bottom of the screen; from the medium breakpoint the sample sits in a column at the end with a line between the two.
What stays local, and how do I connect it for real?
Nothing is sent: Save says "Saved 3 changes in this demo." To make it real, send the list of ids that are on from the submit handler, set saved from the answer and apply the options to your editor instance, for example by passing them to its configuration.