Sanity Visual Option List
For notable updates and bug fixes see change log
A visual way to show options to users, for example, what layout to apply for a text/image component (default layout):
Or with tooltip, and as smaller icons:
From the terminal within the Sanity Studio directory:
sanity install visual-options
In your schema, you should add a field of type 'visualOptions', and the options property should contain a key of 'list'. Within this is another dictionary, with the key being the reference that will be saved against the item. Each item must contain an icon as a minimum, which is a React Component.
In the example below, which produced the image above with small options, the icons are simple React components returning an SVG, therefore react-icons should work here too.
...fields:name: "blockLayout"title: "Block Layout"type: "visualOptions"options:showTooltip: trueoptionSize: "small"list:left:name: "Text Left / Image Right"icon: OITextLeftOverlapdefault: trueright:name: "Text Right / Image Left"icon: OITextRightOverlaptop:name: "Text Top / Image Bottom"icon: OITextTopOverlapbottom:name: "Text Botom / Image Top"icon: OITextBottomOverlapnotext:name: "Image, No Text"icon: OIImagenoimage:name: "Text, No Image"icon: OIText...
options for the schema, there are the following options:
showLabels: (true|false)- Sets whether to show the labels for each item based on their name.
showTooltip: (true|false)- The name of the item will be turned into a tooltip and displayed on hover. Overrides
optionSize: ("small"|"medium"|"large")- Sets the size of the option items. Defaults to "medium" if omitted or and invalid option is provided.
- Allow items multi selections with limits e.g. maximum of two.
- Add a check mark to show selection and allow de-selection (moving of radio to checkboxes also solving the above item).
- Allow standard images to be displayed rather than just SVGs.