style: fix field label

packages/example-nextjs14/src/app/Form.tsx

@@ -15,43 +15,43 @@ export const Form = ({
   searchParams?: object;
   ghLink: string
 }) => {
-  const { state, updateUrl } = useUrlState({
+  const { urlState, setUrl } = useUrlState({
     defaultState: form,
     searchParams,
   });
 
   const onChangeAge = React.useCallback(
     (ev: React.ChangeEvent<HTMLInputElement>) => {
       const val = +ev.target.value;
-      updateUrl({ age: val ? val : undefined });
+      setUrl({ age: val ? val : undefined });
     },
-    [updateUrl],
+    [setUrl],
   );
 
   const onChangeName = React.useCallback(
     (ev: React.ChangeEvent<HTMLInputElement>) => {
-      updateUrl({ name: ev.target.value });
+      setUrl({ name: ev.target.value });
     },
-    [updateUrl],
+    [setUrl],
   );
 
   const onChangeTerms = React.useCallback(
     (ev: React.ChangeEvent<HTMLInputElement>) => {
-      updateUrl({ 'agree to terms': ev.target.checked });
+      setUrl({ agree_to_terms: ev.target.checked });
     },
-    [updateUrl],
+    [setUrl],
   );
 
   const onChangeTags = React.useCallback(
     (tag: (typeof tags)[number]) => {
-      updateUrl((curr) => ({
+      setUrl((curr) => ({
         ...curr,
         tags: curr.tags.find((t) => t.id === tag.id)
           ? curr.tags.filter((t) => t.id !== tag.id)
           : curr.tags.concat(tag),
       }));
     },
-    [updateUrl],
+    [setUrl],
   );
 
   return (
@@ -65,7 +65,7 @@ export const Form = ({
           <Field id="name" text="Name">
             <Input
               id="name"
-              value={state.name}
+              value={urlState.name}
               onChange={onChangeName}
             />
           </Field>
@@ -74,21 +74,21 @@ export const Form = ({
             <Input
               id="age"
               type="number"
-              value={state.age}
+              value={urlState.age}
               onChange={onChangeAge}
             />
           </Field>
 
           <Field
-            id="agree to terms"
+            id="agree_to_terms"
             text="Agree to terms"
             className="flex flex-row justify-between gap-2 max-w-[150px] min-w-[150px]"
           >
             <Input
-              id="agree to terms"
+              id="agree_to_terms"
               type="checkbox"
               className="max-w-[24px]"
-              checked={state['agree to terms']}
+              checked={urlState['agree_to_terms']}
               onChange={onChangeTerms}
             />
           </Field>
@@ -97,7 +97,7 @@ export const Form = ({
             <div className="flex flex-wrap gap-2">
               {tags.map((tag) => (
                 <Tag
-                  active={!!state.tags.find((t) => t.id === tag.id)}
+                  active={!!urlState.tags.find((t) => t.id === tag.id)}
                   text={tag.value.text}
                   onClick={() => onChangeTags(tag)}
                   key={tag.id}

packages/shared/form.ts

@@ -1,13 +1,13 @@
 export const form: Form = {
   name: "",
   age: undefined,
-  "agree to terms": false,
+  agree_to_terms: false,
   tags: [],
 };
 
 type Form = {
   name: string;
   age?: number;
-  "agree to terms": boolean;
+  agree_to_terms: boolean;
   tags: { id: string; value: { text: string; time: Date; iso?: string } }[];
 };