# Date, Number & File Controls

Six controls handle the values a plain text box handles badly: ranges, dates, times, numbers, files, and verification codes.

```yaml
components:
  - { type: number-input, min: 1, max: 99, step: 1, props: { name: quantity } }
  - { type: date-picker, datePickerMode: range, props: { name: stay } }
  - { type: file-upload, accept: 'image/*', maxFiles: 5, dropZone: true, props: { name: photos } }
```

## `slider`

A range input for a numeric value or a span.

| Property       | Description                                 |
| -------------- | ------------------------------------------- |
| `min` / `max`  | Bounds of the range.                        |
| `step`         | Increment between selectable values.        |
| `showValue`    | Display the current value beside the track. |
| `defaultValue` | Initial value, or initial pair for a range. |

## `date-picker`

A calendar-based date input.

| Property         | Description                                            |
| ---------------- | ------------------------------------------------------ |
| `datePickerMode` | `single` for one date, `range` for a start and an end. |
| `minDate`        | Earliest selectable date.                              |
| `maxDate`        | Latest selectable date.                                |
| `dateFormat`     | How the selected date is displayed.                    |

The mode property is `datePickerMode`, not `mode` — `mode` belongs to `dataSource` and would be ignored here.

## `time-picker`

A time input.

| Property     | Description                                                      |
| ------------ | ---------------------------------------------------------------- |
| `timeFormat` | `12h` (with an AM/PM selector) or `24h`.                         |
| `minTime`    | Earliest selectable time.                                        |
| `maxTime`    | Latest selectable time.                                          |
| `minuteStep` | Granularity of the minute selector, e.g. `15` for quarter-hours. |

## `number-input`

A numeric input with stepper buttons.

| Property       | Description                                                |
| -------------- | ---------------------------------------------------------- |
| `min` / `max`  | Bounds, applied to typed values as well as stepped ones.   |
| `step`         | Increment for the stepper buttons and the keyboard arrows. |
| `showStepper`  | Show the increment and decrement buttons.                  |
| `defaultValue` | Initial value.                                             |

Prefer `number-input` over `input` with `inputType: number` when the value is genuinely counted — it gives keyboard and pointer affordances a text box does not.

## `file-upload`

A file selector with optional drag-and-drop.

| Property                | Description                                                        |
| ----------------------- | ------------------------------------------------------------------ |
| `accept`                | Allowed MIME types or extensions, e.g. `image/*,.pdf`.             |
| `maxFiles`              | Maximum number of files selectable at once.                        |
| `maxFileSize`           | Maximum size in bytes. Oversized files are rejected with an error. |
| `dropZone`              | Render a drop area with a visual drop indicator.                   |
| `uploadAction`          | Action that performs the upload.                                   |
| `onSuccess` / `onError` | Response handlers for the upload result.                           |

Uploaded files land in a [bucket](/en/docs/buckets-overview), which is also where the size and type policy is ultimately enforced — `accept` and `maxFileSize` are a client-side courtesy, not the security boundary.

## `input-otp`

A segmented one-time-password or verification-code input. Its properties are prefixed, because bare `length` and `type` would collide with other controls' vocabulary.

| Property       | Description                                            |
| -------------- | ------------------------------------------------------ |
| `otpLength`    | Number of segments in the code.                        |
| `otpGroupSize` | Segments per visual group, e.g. `3` renders `123-456`. |
| `otpSeparator` | Character drawn between groups.                        |

```yaml
- { type: input-otp, otpLength: 6, otpGroupSize: 3, otpSeparator: '-' }
```

`input-otp` pairs with the email-OTP sign-in strategy — see [Auth Strategies](/en/docs/auth-strategies).

## Related Pages

- [Text & Choice Controls](/en/docs/form-controls) — the text and selection inputs.
- [Forms](/en/docs/forms-overview) — standalone form definitions.
- [Form File Uploads](/en/docs/form-file-uploads) — the upload path end to end.
- [Buckets Overview](/en/docs/buckets-overview) — where uploaded files are stored.
- [Field Types Overview](/en/docs/field-types-overview) — the table fields these write to.