Nuxt UI playground examples

The playground splits into two galleries:

Tab	Content
Documentation	Nuxt UI showcases + API tables (Name / Type / Default / Description)
Examples	JSONForms demos, compositions and edge cases

Any example whose name starts with nuxt- automatically lands in Documentation. Open the playground.

Documentation catalogue

Overview

Example	File	Takeaway
Nuxt UI — Control showcase	nuxt-ui-showcase.ts	Several controls side by side to judge height / alignment
Control Options	control-options.ts	Common options, restrict, toggle, autocomplete, WYSIWYG
Simple form	simple-form.ts	Minimal string + boolean form

Text & media controls

Example	Components	Key options
String & Textarea	UInput, UTextarea, password	restrict, multi, input, format: password
Pin Input	UPinInput	format: pin, otp, mask, length
Color Picker	UColorPicker	colorFormat, showInput
File Upload	UFileUpload	accept, layout, multi through array
Autocomplete API	UInputMenu	api.*, minLength, suggestion
WYSIWYG	UEditor	wysiwyg, contentType (json | html)

Numbers & booleans

Example	Components	Key options
Number	UInputNumber	step, inputNumber
Slider	USlider	slider, step, hideValue
Rating	UInputRating	format: rating, icon, hideValue
Boolean	UCheckbox, USwitch	toggle, checkbox, switch

Enums

Example	Components	Key options
Select	USelect, USelectMenu	format: select vs default (search)
Radio & Multi-enum	URadioGroup, UCheckboxGroup	format: radio, vertical, radioGroup

Dates

Example	Components	Key options
Date & Time	UInputDate, UInputTime	pattern, month / year precision
Calendar	UCalendar	format: calendar
Date ranges	Calendar / InputDate	range, minDate, disabled*

Structure

Example	Components	Key options
Tags	UInputTags	format: tags, delimiter
Array	Repeatable cards	showSortButtons, elementLabelProp, detail
Layouts	UCard, UTabs, Label	card, queryKey, level, separator

Adding a showcase

1. Create playground/examples/items/nuxt-<name>.ts calling registerExamples([{ name: 'nuxt-…', … }]).
2. Prefix name with nuxt- (or pass section: 'docs') to land in the Documentation tab.
3. Declare the API groups in playground/docs-api/props.ts (API_BY_EXAMPLE).
4. Document the options under docs/guide/options/ and link them from this page.

Files are eagerly loaded through import.meta.glob in playground/examples/index.ts — no extra manual registry.

Relation to the Options API guide

Every options page ends with ready-to-paste JSON. The showcases above are their interactive counterpart:

• Common
• Text & media
• Numbers
• Boolean
• Enums
• Dates
• Arrays & objects
• Layouts
• Pass-through