Skip to main content
View as Markdown

Date, Number & File Controls

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

app.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, which is also where the size and type policy is ultimately enforced — accept and maxFileSize are a client-side courtesy, not the security boundary.

Last updated September 1, 2026

Edit this pageReport an issue

This documentation was written with AI, so errors or outdated content are possible. Sovrium is in beta. Contributions and corrections are welcome.

Built with Sovrium