Multi-Step Snap Form Example

Using snap points to build expandable form steps in a drawer interface.

import React, { useState } from 'react';
import { Drawer } from '@ughur/temper';

export function SnapFormDrawer() {
  const snapPoints = [0.35, 0.75, 1];
  const [activeSnapPoint, setActiveSnapPoint] = useState<number | string | null>(snapPoints[0]);

  return (
    <Drawer.Root
      snapPoints={snapPoints}
      activeSnapPoint={activeSnapPoint}
      setActiveSnapPoint={setActiveSnapPoint}
    >
      <Drawer.Trigger className="px-4 py-2 bg-emerald-600 text-white rounded-lg font-medium">
        Feedback Form
      </Drawer.Trigger>

      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 bg-black/40 z-50" />
        <Drawer.Content className="fixed bottom-0 left-0 right-0 bg-white z-50 rounded-t-2xl p-6 flex flex-col">
          <Drawer.Handle className="w-12 h-1.5 bg-gray-300 rounded-full mx-auto mb-4" />

          <Drawer.Title className="text-xl font-bold text-gray-900 mb-1">
            Send Feedback
          </Drawer.Title>
          <Drawer.Description className="text-sm text-gray-500 mb-4">
            Drag handle up or select a snap step to expand form options.
          </Drawer.Description>

          <div className="space-y-4 my-2">
            <div>
              <label className="block text-xs font-semibold text-gray-700 mb-1">Overall Rating</label>
              <select className="w-full p-2 border rounded-lg text-sm">
                <option>⭐⭐⭐⭐⭐ Excellent</option>
                <option>⭐⭐⭐⭐ Good</option>
                <option>⭐⭐⭐ Average</option>
              </select>
            </div>

            {activeSnapPoint !== 0.35 && (
              <div>
                <label className="block text-xs font-semibold text-gray-700 mb-1">Detailed Comments</label>
                <textarea
                  rows={4}
                  className="w-full p-2 border rounded-lg text-sm"
                  placeholder="Tell us what you liked or how we can improve..."
                />
              </div>
            )}
          </div>

          <div className="mt-auto flex justify-between gap-3 pt-4 border-t">
            <button
              onClick={() =>
                setActiveSnapPoint(activeSnapPoint === 0.35 ? 0.75 : 0.35)
              }
              className="text-xs text-indigo-600 font-semibold underline">
              {activeSnapPoint === 0.35 ? 'Expand Details' : 'Collapse Details'}
            </button>

            <Drawer.Close className="px-4 py-2 bg-emerald-600 text-white rounded-lg text-sm font-semibold">
              Submit Feedback
            </Drawer.Close>
          </div>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}