Date, Number & File Controls

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

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

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

input-otp pairs with the email-OTP sign-in strategy — see Auth Strategies.

Related Pages

• Text & Choice Controls — the text and selection inputs.
• Forms — standalone form definitions.
• Form File Uploads — the upload path end to end.
• Buckets Overview — where uploaded files are stored.
• Field Types Overview — the table fields these write to.