Skip to main content
View as Markdown

Specialty Components

Specialty components serve focused use cases: multi-step wizards, drag-to-reorder lists, language switching, status dots, and standalone advanced inputs. Several are cross-referenced from other category pages (form-controls, social) where they fit more than one role. All accept the shared props bag plus visibility and responsive modules.

components:
  - type: wizard
    steps:
      - { id: account, label: Account, description: 'Set up your account' }
      - { id: profile, label: Profile }
    children:
      - { type: input, name: email }
      - { type: input, name: name }

wizard

A stepped, multi-page flow with a progress indicator.

Property Description
steps Step definitions (see below).
initialStep The step id shown first.
children The components rendered per step.

Each step:

Step property Description
id Unique step identifier (used for navigation and initialStep).
label Display text in the progress indicator.
icon Lucide icon name in the step indicator.
description Short description below the step label.

reorderable-list

A list whose items can be reordered by drag-and-drop or keyboard. (Also documented in Interactivity & Scripts.)

Property Description
dragHandle Enable drag-and-drop reordering of list items.
onReorder Action fired when items are reordered.
children The list items (each with a drag handle).

language-switcher

A control that switches the active language for an internationalized app.

Property Description
props HTML attributes and display options (e.g. className, label style).

See Languages for i18n configuration.

status-indicator

A colored status dot with a label (also expressible as badge with variant: status).

Property Description
label Status label text next to the dot.
color Dot color (CSS color value or theme token name).
pulse Enable a pulsing animation on the dot.

file-upload

A file picker with optional drag-and-drop. (Also documented in Form Controls.)

Property Description
accept Accepted MIME types/extensions (e.g. image/*, .pdf).
dropZone Enable a drag-and-drop dropzone area.
maxFiles Maximum number of files per upload.
maxFileSize Maximum file size in bytes (e.g. 10485760 for 10MB).

number-input

A numeric input with stepper buttons. (Also documented in Form Controls.)

Property Description
min Minimum value.
max Maximum value.
step Step increment.
showStepper Show increment/decrement stepper buttons (default: true).
defaultValue Initial numeric value.

time-picker

A time input. (Also documented in Form Controls.)

Property Description
minTime Minimum selectable time (HH:mm).
maxTime Maximum selectable time (HH:mm).
stepMinutes Minute increment for selection (default: 15).

comments / ai-chat

Engagement components documented in Social Components: comments (threaded comments, public/guest), commentCount, and ai-chat (an AI-agent chat panel).