Date Field

Use it on your site

import { useRive } from '@rive-app/react-canvas';

export function DateField() {
  const { rive, RiveComponent } = useRive({
    src: '/form-date.riv',
    artboard: 'Date Field',
    stateMachines: 'State Machine 1',
    autoplay: true,
    autoBind: true,
  });

  // every input on this page is a view model property
  const vm = rive?.viewModelInstance;
  if (vm) vm.color('iconColor').value = 0xFF735EF9;

  return <RiveComponent style={{ width: '100%', height: 400 }} />;
}

Inputs: placeholder, fontSize, disabled, boxColor, borderColor, focusColor, textColor, placeholderColor, disabledColor, date, iconColor, successColor. All on the DateField view model.

How it's built

From the Form Set: tap it and the calendar squashes and tears its old page off. Your app opens its own date picker, writes the day back, and the new day pops onto the fresh page with a ring. Listen for openPicker, write date as YYYY-MM-DD, and read text and valid. The box stretches to any width.

1. 1
   Your picker, not oursA tap sets focused and fires openPicker. Your app opens its own date picker (native, web, whatever you use) and writes the day into date as YYYY-MM-DD.
2. 2
   One script, one jobA tiny script reads date and writes text (like 12 Nov 2026) and valid. A new date also clears focused. If the picker is cancelled, set focused to false yourself.
3. 3
   Two timelinesPicking squashes the calendar and tears the old page off its corner. Land pops the new day on, hops the calendar and rings. Plain timelines you can open and edit.
4. 4
   Any widthThe box is a layout, so it stretches with the artboard. Set Fit to Layout and it fills whatever space your form gives it.