diff --git a/packages/playground-react/pages/combinations/form.tsx b/packages/playground-react/pages/combinations/form.tsx new file mode 100644 index 0000000000..4b726f1782 --- /dev/null +++ b/packages/playground-react/pages/combinations/form.tsx @@ -0,0 +1,353 @@ +import { useState } from 'react' +import { Switch, RadioGroup, Listbox, Combobox } from '@headlessui/react' +import { classNames } from '../../utils/class-names' + +function Section({ title, children }) { + return ( +
+ {title} +
{children}
+
+ ) +} + +let sizes = ['xs', 'sm', 'md', 'lg', 'xl'] +let people = [ + { id: 1, name: { first: 'Alice' } }, + { id: 2, name: { first: 'Bob' } }, + { id: 3, name: { first: 'Charlie' } }, +] +let locations = ['New York', 'London', 'Paris', 'Berlin'] + +export default function App() { + let [result, setResult] = useState(() => (typeof window === 'undefined' ? [] : new FormData())) + let [notifications, setNotifications] = useState(false) + let [apple, setApple] = useState(false) + let [banana, setBanana] = useState(false) + let [size, setSize] = useState(sizes[(Math.random() * sizes.length) | 0]) + let [person, setPerson] = useState(people[(Math.random() * people.length) | 0]) + let [activeLocation, setActiveLocation] = useState( + locations[(Math.random() * locations.length) | 0] + ) + let [query, setQuery] = useState('') + + return ( +
+
{ + event.preventDefault() + setResult(new FormData(event.currentTarget)) + }} + > +
+
+
+ + Enable notifications + + + classNames( + 'focus:shadow-outline relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none', + checked ? 'bg-indigo-600' : 'bg-gray-200' + ) + } + > + {({ checked }) => ( + <> + + + )} + + +
+ +
+ + Apple + + + classNames( + 'focus:shadow-outline relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none', + checked ? 'bg-indigo-600' : 'bg-gray-200' + ) + } + > + {({ checked }) => ( + <> + + + )} + + + + + Banana + + classNames( + 'focus:shadow-outline relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none', + checked ? 'bg-indigo-600' : 'bg-gray-200' + ) + } + > + {({ checked }) => ( + <> + + + )} + + +
+
+
+ +
+ {sizes.map((size) => { + return ( + + classNames( + 'relative flex w-20 border px-2 py-4 first:rounded-l-md last:rounded-r-md focus:outline-none', + active ? 'z-10 border-indigo-200 bg-indigo-50' : 'border-gray-200' + ) + } + > + {({ active, checked }) => ( +
+
+ + {size} + +
+
+ {checked && ( + + + + )} +
+
+ )} + + ) + })} +
+ +
+
+
+ +
+ + + {person.name.first} + + + + + + + + +
+ + {people.map((person) => ( + { + return classNames( + 'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none', + active ? 'bg-indigo-600 text-white' : 'text-gray-900' + ) + }} + > + {({ active, selected }) => ( + <> + + {person.name.first} + + {selected && ( + + + + + + )} + + )} + + ))} + +
+
+ +
+
+
+
+ setActiveLocation(location)} + className="w-full rounded border border-black/5 bg-white bg-clip-padding shadow-sm" + > + {({ open }) => { + return ( +
+
+ setQuery(e.target.value)} + className="w-full rounded-md border-none px-3 py-1 outline-none" + placeholder="Search users..." + /> +
+
+ + {locations.map((location) => ( + { + return classNames( + 'relative flex cursor-default select-none space-x-4 py-2 pl-3 pr-9 focus:outline-none', + active ? 'bg-indigo-600 text-white' : 'text-gray-900' + ) + }} + > + {({ active, selected }) => ( + <> + + {location} + + {active && ( + + + + + + )} + + )} + + ))} + +
+
+
+
+ ) + }} + +
+
+
+ + + +
+ Form data (entries): + 
{JSON.stringify([...result.entries()], null, 2)}
+
+
+
+ ) +}