# 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.

```yaml
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](/en/docs/interactivity-scripts#reorderable-list).)

| 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](/en/docs/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](/en/docs/form-controls#file-upload).)

| 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](/en/docs/form-controls#number-input).)

| 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](/en/docs/form-controls#time-picker).)

| 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](/en/docs/social-components): `comments` (threaded comments, public/guest), `commentCount`, and `ai-chat` (an AI-agent chat panel).

## Related Pages

- [Pages Overview](/en/docs/pages-overview) — the component model and actions.
- [Form Controls](/en/docs/form-controls) — `file-upload`, `number-input`, `time-picker`.
- [Social Components](/en/docs/social-components) — `comments`, `commentCount`, `ai-chat`.
- [Languages](/en/docs/languages) — i18n for `language-switcher`.
- [Agents](/en/docs/ai-agents) — agents powering `ai-chat`.