diff --git a/apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx b/apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx
index 5405f9c3bb7a..3e8b598bc745 100644
--- a/apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx
+++ b/apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx
@@ -40,6 +40,7 @@ import {
   standardAttributesToReactProps,
 } from "@webstudio-is/react-sdk";
 import { rawTheme } from "@webstudio-is/design-system";
+import { Input, Select, Textarea } from "@webstudio-is/sdk-components-react";
 import {
   $propValuesByInstanceSelectorWithMemoryProps,
   getIndexedInstanceId,
@@ -475,6 +476,16 @@ export const WebstudioComponentCanvas = forwardRef<
 
   if (instance.component === elementComponent) {
     Component = instance.tag ?? "div";
+    // replace to enable uncontrolled state
+    if (Component === "input") {
+      Component = Input as AnyComponent;
+    }
+    if (Component === "textarea") {
+      Component = Textarea as AnyComponent;
+    }
+    if (Component === "select") {
+      Component = Select as AnyComponent;
+    }
   }
 
   if (instance.component === collectionComponent) {
@@ -670,6 +681,16 @@ export const WebstudioComponentPreview = forwardRef<
 
   if (instance.component === elementComponent) {
     Component = instance.tag ?? "div";
+    // replace to enable uncontrolled state
+    if (Component === "input") {
+      Component = Input as AnyComponent;
+    }
+    if (Component === "textarea") {
+      Component = Textarea as AnyComponent;
+    }
+    if (Component === "select") {
+      Component = Select as AnyComponent;
+    }
   }
 
   if (instance.component === blockComponent) {
diff --git a/apps/builder/app/shared/html.test.tsx b/apps/builder/app/shared/html.test.tsx
index 9458c0abca38..b36115dd4f97 100644
--- a/apps/builder/app/shared/html.test.tsx
+++ b/apps/builder/app/shared/html.test.tsx
@@ -249,3 +249,55 @@ test("optionally paste svg as html embed", () => {
     )
   );
 });
+
+test("generate textarea element", () => {
+  expect(
+    generateFragmentFromHtml(`
+      <div>
+        <textarea>
+          my text
+        </textarea>
+      </div>
+    `)
+  ).toEqual(
+    renderTemplate(
+      <ws.element ws:tag="div">
+        <ws.element ws:tag="textarea" value="my text" />
+      </ws.element>
+    )
+  );
+});
+
+test("generate select element", () => {
+  expect(
+    generateFragmentFromHtml(`
+      <div>
+        <select>
+          <option value="one">One</option>
+          <option value="two" selected>Two</option>
+        </select>
+        <select>
+          <option>One</option>
+          <option selected>Two</option>
+        </select>
+      </div>
+    `)
+  ).toEqual(
+    renderTemplate(
+      <ws.element ws:tag="div">
+        <ws.element ws:tag="select" value="two">
+          <ws.element ws:tag="option" value="one">
+            One
+          </ws.element>
+          <ws.element ws:tag="option" value="two">
+            Two
+          </ws.element>
+        </ws.element>
+        <ws.element ws:tag="select" value="Two">
+          <ws.element ws:tag="option">One</ws.element>
+          <ws.element ws:tag="option">Two</ws.element>
+        </ws.element>
+      </ws.element>
+    )
+  );
+});
diff --git a/apps/builder/app/shared/html.ts b/apps/builder/app/shared/html.ts
index 5bb517367553..0face7ba30d4 100644
--- a/apps/builder/app/shared/html.ts
+++ b/apps/builder/app/shared/html.ts
@@ -176,6 +176,10 @@ export const generateFragmentFromHtml = (
         createLocalStyles(instanceId, attr.value);
         continue;
       }
+      // selected option is represented as fake value attribute on select element
+      if (node.tagName === "option" && attr.name === "selected") {
+        continue;
+      }
       if (type === "string") {
         props.push({ id, instanceId, name, type, value: attr.value });
         continue;
@@ -195,6 +199,32 @@ export const generateFragmentFromHtml = (
       contentTags,
       richTextContentTags
     );
+    if (node.tagName === "select") {
+      for (const childNode of node.childNodes) {
+        if (defaultTreeAdapter.isElementNode(childNode)) {
+          if (
+            childNode.tagName === "option" &&
+            childNode.attrs.find((attr) => attr.name === "selected")
+          ) {
+            const valueAttr = childNode.attrs.find(
+              (attr) => attr.name === "value"
+            );
+            // if value attribute is omitted, the value is taken from the text content of the option element
+            const childText = childNode.childNodes.find((childNode) =>
+              defaultTreeAdapter.isTextNode(childNode)
+            );
+            // selected option is represented as fake value attribute on select element
+            props.push({
+              id: `${instance.id}:value`,
+              instanceId: instance.id,
+              name: "value",
+              type: "string",
+              value: valueAttr?.value ?? childText?.value.trim() ?? "",
+            });
+          }
+        }
+      }
+    }
     for (const childNode of node.childNodes) {
       if (defaultTreeAdapter.isElementNode(childNode)) {
         const child = convertElementToInstance(childNode);
@@ -211,6 +241,18 @@ export const generateFragmentFromHtml = (
           // collapse spacing characters inside of text to avoid preserved newlines
           value: childNode.value.replaceAll(/\s+/g, " "),
         };
+        // textarea content is initial value
+        // and represented with fake value attribute
+        if (node.tagName === "textarea") {
+          props.push({
+            id: `${instance.id}:value`,
+            instanceId: instance.id,
+            name: "value",
+            type: "string",
+            value: child.value.trim(),
+          });
+          continue;
+        }
         // when element has content elements other than supported by rich text
         // wrap its text children with span, for example
         // <div>
diff --git a/apps/builder/app/shared/nano-states/components.ts b/apps/builder/app/shared/nano-states/components.ts
index 2572ae0ece48..63e0d2e3b113 100644
--- a/apps/builder/app/shared/nano-states/components.ts
+++ b/apps/builder/app/shared/nano-states/components.ts
@@ -129,6 +129,7 @@ export const subscribeComponentHooks = () => {
                 id: instance.id,
                 instanceKey: getInstanceKey(array.slice(index)),
                 component: instance.component,
+                tag: instance.tag,
               };
             }),
           });
@@ -147,6 +148,7 @@ export const subscribeComponentHooks = () => {
                 id: instance.id,
                 instanceKey: getInstanceKey(array.slice(index)),
                 component: instance.component,
+                tag: instance.tag,
               };
             }),
           });
diff --git a/packages/cli/src/framework-react-router.ts b/packages/cli/src/framework-react-router.ts
index 0d007e43a246..bd325a44a083 100644
--- a/packages/cli/src/framework-react-router.ts
+++ b/packages/cli/src/framework-react-router.ts
@@ -56,6 +56,9 @@ export const createFramework = async (): Promise<Framework> => {
     metas,
     components,
     tags: {
+      textarea: `${base}:Textarea`,
+      input: `${base}:Input`,
+      select: `${base}:Select`,
       body: `${reactRouter}:Body`,
       a: `${reactRouter}:Link`,
       form: `${reactRouter}:RemixForm`,
diff --git a/packages/cli/src/framework-remix.ts b/packages/cli/src/framework-remix.ts
index d03a527c2b09..6d5ef3b1f217 100644
--- a/packages/cli/src/framework-remix.ts
+++ b/packages/cli/src/framework-remix.ts
@@ -56,6 +56,9 @@ export const createFramework = async (): Promise<Framework> => {
     metas,
     components,
     tags: {
+      textarea: `${base}:Textarea`,
+      input: `${base}:Input`,
+      select: `${base}:Select`,
       body: `${remix}:Body`,
       a: `${remix}:Link`,
       form: `${remix}:RemixForm`,
diff --git a/packages/cli/src/framework-vike-ssg.ts b/packages/cli/src/framework-vike-ssg.ts
index 148c59ea7be0..0f2876a9cc1f 100644
--- a/packages/cli/src/framework-vike-ssg.ts
+++ b/packages/cli/src/framework-vike-ssg.ts
@@ -53,7 +53,11 @@ export const createFramework = async (): Promise<Framework> => {
   return {
     metas,
     components,
-    tags: {},
+    tags: {
+      textarea: `${base}:Textarea`,
+      input: `${base}:Input`,
+      select: `${base}:Select`,
+    },
     html: ({ pagePath }: { pagePath: string }) => {
       // ignore dynamic pages in static export
       if (isPathnamePattern(pagePath)) {
diff --git a/packages/html-data/bin/attributes.ts b/packages/html-data/bin/attributes.ts
index 4598df5f0aab..33f45d543b0b 100644
--- a/packages/html-data/bin/attributes.ts
+++ b/packages/html-data/bin/attributes.ts
@@ -73,6 +73,9 @@ const overrides: Record<
     popovertarget: false,
     popovertargetaction: false,
   },
+  label: {
+    for: { required: true },
+  },
   dialog: {
     closedby: false,
   },
@@ -80,6 +83,13 @@ const overrides: Record<
     ismap: false,
   },
   input: {
+    name: { required: true },
+    value: { required: true },
+    checked: { required: true },
+    type: { required: true },
+    placeholder: { required: true },
+    required: { required: true },
+    autofocus: { required: true },
     alpha: false,
     colorspace: false,
     // react types have it only in textarea
@@ -87,6 +97,27 @@ const overrides: Record<
     popovertarget: false,
     popovertargetaction: false,
   },
+  textarea: {
+    name: { required: true },
+    placeholder: { required: true },
+    required: { required: true },
+    autofocus: { required: true },
+  },
+  select: {
+    name: { required: true },
+    required: { required: true },
+    autofocus: { required: true },
+    // mutltiple mode is not considered accessible
+    // and we cannot express it in builder so easier to remove
+    multiple: false,
+  },
+  option: {
+    label: { required: true },
+    value: { required: true },
+    disabled: { required: true },
+    // enforce fake value attribute on select element
+    selected: false,
+  },
 };
 
 // Crawl WHATWG HTML.
@@ -99,6 +130,26 @@ const [tbody] = findTags(table, "tbody");
 const rows = findTags(tbody, "tr");
 
 const attributesByTag: Record<string, Attribute[]> = {};
+// textarea does not have value attribute and text content is used as initial value
+// introduce fake value attribute to manage initial state similar to input
+attributesByTag.textarea = [
+  {
+    name: "value",
+    description: "Value of the form control",
+    type: "string",
+    required: true,
+  },
+];
+// select does not have value attribute and selected options are used as initial value
+// introduce fake value attribute to manage initial state similar to input
+attributesByTag.select = [
+  {
+    name: "value",
+    description: "Value of the form control",
+    type: "string",
+    required: true,
+  },
+];
 
 for (const row of rows) {
   const attribute = getTextContent(row.childNodes[0]).trim();
@@ -118,6 +169,32 @@ for (const row of rows) {
   if (value.includes("valid navigable target name or keyword")) {
     possibleOptions = ["_blank", "_self", "_parent", "_top"];
   }
+  if (value.includes("input type keyword")) {
+    possibleOptions = [
+      "hidden",
+      "text",
+      "search",
+      "tel",
+      "url",
+      "email",
+      "password",
+      "date",
+      "month",
+      "week",
+      "time",
+      "datetime-local",
+      "number",
+      "range",
+      "color",
+      "checkbox",
+      "radio",
+      "file",
+      "submit",
+      "image",
+      "reset",
+      "button",
+    ];
+  }
   let type: "string" | "boolean" | "number" | "select" = "string";
   let options: undefined | string[];
   if (possibleOptions.length > 0) {
diff --git a/packages/html-data/bin/elements.ts b/packages/html-data/bin/elements.ts
index d6fb3d4e6d59..f04ac57fc1d6 100644
--- a/packages/html-data/bin/elements.ts
+++ b/packages/html-data/bin/elements.ts
@@ -46,8 +46,13 @@ const elementsByTag: Record<string, Element> = {};
       });
     const description = getTextContent(row.childNodes[1]);
     const categories = parseList(getTextContent(row.childNodes[2]));
-    const children = parseList(getTextContent(row.childNodes[4]));
+    let children = parseList(getTextContent(row.childNodes[4]));
     for (const tag of elements) {
+      // textarea does not have value attribute and text content is used as initial value
+      // introduce fake value attribute to manage initial state similar to input
+      if (tag === "textarea") {
+        children = [];
+      }
       elementsByTag[tag] = {
         description,
         categories,
diff --git a/packages/html-data/src/__generated__/attributes-jsx-test.tsx b/packages/html-data/src/__generated__/attributes-jsx-test.tsx
index 39e234c2a602..d9d17dc1b351 100644
--- a/packages/html-data/src/__generated__/attributes-jsx-test.tsx
+++ b/packages/html-data/src/__generated__/attributes-jsx-test.tsx
@@ -146,7 +146,7 @@ const Page = () => {
         src={""}
         step={0}
         title={""}
-        type={""}
+        type={"hidden"}
         value={""}
         width={0}
       />
@@ -172,15 +172,15 @@ const Page = () => {
       />
       <ol reversed={true} start={0} type={"1"} />
       <optgroup disabled={true} label={""} />
-      <option disabled={true} label={""} selected={true} value={""} />
+      <option disabled={true} label={""} value={""} />
       <output htmlFor={""} form={""} name={""} />
       <progress max={0} value={0} />
       <q cite={""} />
       <select
+        value={""}
         autoComplete={""}
         disabled={true}
         form={""}
-        multiple={true}
         name={""}
         required={true}
         size={0}
@@ -197,6 +197,7 @@ const Page = () => {
       />
       <td colSpan={0} headers={""} rowSpan={0} />
       <textarea
+        value={""}
         autoComplete={""}
         cols={0}
         dirName={""}
diff --git a/packages/html-data/src/__generated__/attributes.ts b/packages/html-data/src/__generated__/attributes.ts
index a0e4ab5331ea..a16a9c1dd400 100644
--- a/packages/html-data/src/__generated__/attributes.ts
+++ b/packages/html-data/src/__generated__/attributes.ts
@@ -697,6 +697,7 @@ export const attributesByTag: Record<string, undefined | Attribute[]> = {
       name: "checked",
       description: "Whether the control is checked",
       type: "boolean",
+      required: true,
     },
     {
       name: "disabled",
@@ -780,6 +781,7 @@ export const attributesByTag: Record<string, undefined | Attribute[]> = {
       description:
         "Name of the element to use for form submission and in the form.elements API",
       type: "string",
+      required: true,
     },
     {
       name: "pattern",
@@ -790,6 +792,7 @@ export const attributesByTag: Record<string, undefined | Attribute[]> = {
       name: "placeholder",
       description: "User-visible label to be placed within the form control",
       type: "string",
+      required: true,
     },
     {
       name: "readonly",
@@ -800,6 +803,7 @@ export const attributesByTag: Record<string, undefined | Attribute[]> = {
       name: "required",
       description: "Whether the control is required for form submission",
       type: "boolean",
+      required: true,
     },
     {
       name: "size",
@@ -824,12 +828,38 @@ export const attributesByTag: Record<string, undefined | Attribute[]> = {
     {
       name: "type",
       description: "Type of form control",
-      type: "string",
+      type: "select",
+      options: [
+        "hidden",
+        "text",
+        "search",
+        "tel",
+        "url",
+        "email",
+        "password",
+        "date",
+        "month",
+        "week",
+        "time",
+        "datetime-local",
+        "number",
+        "range",
+        "color",
+        "checkbox",
+        "radio",
+        "file",
+        "submit",
+        "image",
+        "reset",
+        "button",
+      ],
+      required: true,
     },
     {
       name: "value",
       description: "Value of the form control",
       type: "string",
+      required: true,
     },
     {
       name: "width",
@@ -855,6 +885,7 @@ export const attributesByTag: Record<string, undefined | Attribute[]> = {
       name: "for",
       description: "Associate the label with form control",
       type: "string",
+      required: true,
     },
   ],
   li: [
@@ -1006,21 +1037,19 @@ export const attributesByTag: Record<string, undefined | Attribute[]> = {
       name: "disabled",
       description: "Whether the form control is disabled",
       type: "boolean",
+      required: true,
     },
     {
       name: "label",
       description: "User-visible label",
       type: "string",
-    },
-    {
-      name: "selected",
-      description: "Whether the option is selected by default",
-      type: "boolean",
+      required: true,
     },
     {
       name: "value",
       description: "Value to be used for form submission",
       type: "string",
+      required: true,
     },
   ],
   output: [
@@ -1062,6 +1091,12 @@ export const attributesByTag: Record<string, undefined | Attribute[]> = {
     },
   ],
   select: [
+    {
+      name: "value",
+      description: "Value of the form control",
+      type: "string",
+      required: true,
+    },
     {
       name: "autocomplete",
       description: "Hint for form autofill feature",
@@ -1077,21 +1112,18 @@ export const attributesByTag: Record<string, undefined | Attribute[]> = {
       description: "Associates the element with a form element",
       type: "string",
     },
-    {
-      name: "multiple",
-      description: "Whether to allow multiple values",
-      type: "boolean",
-    },
     {
       name: "name",
       description:
         "Name of the element to use for form submission and in the form.elements API",
       type: "string",
+      required: true,
     },
     {
       name: "required",
       description: "Whether the control is required for form submission",
       type: "boolean",
+      required: true,
     },
     {
       name: "size",
@@ -1162,6 +1194,12 @@ export const attributesByTag: Record<string, undefined | Attribute[]> = {
     },
   ],
   textarea: [
+    {
+      name: "value",
+      description: "Value of the form control",
+      type: "string",
+      required: true,
+    },
     {
       name: "autocomplete",
       description: "Hint for form autofill feature",
@@ -1203,11 +1241,13 @@ export const attributesByTag: Record<string, undefined | Attribute[]> = {
       description:
         "Name of the element to use for form submission and in the form.elements API",
       type: "string",
+      required: true,
     },
     {
       name: "placeholder",
       description: "User-visible label to be placed within the form control",
       type: "string",
+      required: true,
     },
     {
       name: "readonly",
@@ -1218,6 +1258,7 @@ export const attributesByTag: Record<string, undefined | Attribute[]> = {
       name: "required",
       description: "Whether the control is required for form submission",
       type: "boolean",
+      required: true,
     },
     {
       name: "rows",
diff --git a/packages/html-data/src/__generated__/elements.ts b/packages/html-data/src/__generated__/elements.ts
index e9b661dce5f6..be27fde09740 100644
--- a/packages/html-data/src/__generated__/elements.ts
+++ b/packages/html-data/src/__generated__/elements.ts
@@ -584,7 +584,7 @@ export const elementsByTag: Record<string, Element> = {
       "form-associated",
       "palpable",
     ],
-    children: ["text"],
+    children: [],
   },
   tfoot: {
     description: "Group of footer rows in a table",
diff --git a/packages/html-data/src/pseudo-classes.ts b/packages/html-data/src/pseudo-classes.ts
index d1f1d3d48629..d68f3865bddd 100644
--- a/packages/html-data/src/pseudo-classes.ts
+++ b/packages/html-data/src/pseudo-classes.ts
@@ -62,7 +62,7 @@ export const pseudoClassesByTag: Record<string, string[]> = {
     // ":open"
   ],
   optgroup: [...ability],
-  option: [...ability, ":checked"],
+  option: [...ability, ":checked", ":default"],
   fieldset: [...ability, ...validity],
   progress: [":indeterminate"],
   details: [":open"],
diff --git a/packages/react-sdk/src/hook.ts b/packages/react-sdk/src/hook.ts
index d17cf7d6706c..028148dd22b2 100644
--- a/packages/react-sdk/src/hook.ts
+++ b/packages/react-sdk/src/hook.ts
@@ -4,6 +4,7 @@ export type InstanceData = {
   id: Instance["id"];
   instanceKey: string;
   component: Instance["component"];
+  tag?: Instance["tag"];
 };
 
 /**
diff --git a/packages/sdk-components-react/src/__generated__/checkbox.props.ts b/packages/sdk-components-react/src/__generated__/checkbox.props.ts
index ca811353e8df..363aefe7de24 100644
--- a/packages/sdk-components-react/src/__generated__/checkbox.props.ts
+++ b/packages/sdk-components-react/src/__generated__/checkbox.props.ts
@@ -5,6 +5,6 @@ export const props: Record<string, PropMeta> = {
     required: false,
     control: "text",
     type: "string",
-    description: "Current value of the element",
+    description: "Value of the form control",
   },
 };
diff --git a/packages/sdk-components-react/src/__generated__/radio-button.props.ts b/packages/sdk-components-react/src/__generated__/radio-button.props.ts
index ca811353e8df..363aefe7de24 100644
--- a/packages/sdk-components-react/src/__generated__/radio-button.props.ts
+++ b/packages/sdk-components-react/src/__generated__/radio-button.props.ts
@@ -5,6 +5,6 @@ export const props: Record<string, PropMeta> = {
     required: false,
     control: "text",
     type: "string",
-    description: "Current value of the element",
+    description: "Value of the form control",
   },
 };
diff --git a/packages/sdk-components-react/src/button.template.tsx b/packages/sdk-components-react/src/button.template.tsx
deleted file mode 100644
index c273c173aa3c..000000000000
--- a/packages/sdk-components-react/src/button.template.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { type TemplateMeta, $, PlaceholderValue } from "@webstudio-is/template";
-
-export const meta: TemplateMeta = {
-  category: "forms",
-  order: 2,
-  description:
-    "Use a button to submit forms or trigger actions within a page. Do not use a button to navigate users to another resource or another page - that’s what a link is used for.",
-  template: (
-    <$.Button>{new PlaceholderValue("Button text you can edit")}</$.Button>
-  ),
-};
diff --git a/packages/sdk-components-react/src/checkbox.template.tsx b/packages/sdk-components-react/src/checkbox.template.tsx
deleted file mode 100644
index 3f3cd40a6473..000000000000
--- a/packages/sdk-components-react/src/checkbox.template.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { type TemplateMeta, $, PlaceholderValue } from "@webstudio-is/template";
-
-export const meta: TemplateMeta = {
-  category: "forms",
-  description:
-    "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their “Name” properties. Unlike radios, any number of checkboxes in a group can be checked.",
-  order: 6,
-  template: (
-    <$.Label ws:label="Checkbox Field">
-      <$.Checkbox />
-      <$.Text ws:label="Checkbox Label" ws:tag="span">
-        {new PlaceholderValue("Checkbox")}
-      </$.Text>
-    </$.Label>
-  ),
-};
diff --git a/packages/sdk-components-react/src/form.ws.ts b/packages/sdk-components-react/src/form.ws.ts
index d156e2ebf628..46331c02a00a 100644
--- a/packages/sdk-components-react/src/form.ws.ts
+++ b/packages/sdk-components-react/src/form.ws.ts
@@ -11,11 +11,8 @@ const presetStyle = {
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
-  category: "forms",
   label: "Form",
-  description: "Create filters, surveys, searches and more.",
   presetStyle,
-  order: 0,
   initialProps: ["id", "class", "action"],
   props,
 };
diff --git a/packages/sdk-components-react/src/input.tsx b/packages/sdk-components-react/src/input.tsx
index bef9759dd7bf..09462b0fba5f 100644
--- a/packages/sdk-components-react/src/input.tsx
+++ b/packages/sdk-components-react/src/input.tsx
@@ -1,40 +1,24 @@
-import { forwardRef, type ElementRef, type ComponentProps } from "react";
+import { forwardRef, useContext, type ComponentProps } from "react";
+import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 
-export const defaultTag = "input";
-
-export const Input = forwardRef<
-  ElementRef<typeof defaultTag>,
-  ComponentProps<typeof defaultTag> & {
-    type?:
-      | "color"
-      | "date"
-      | "datetime-local"
-      | "email"
-      | "hidden"
-      | "month"
-      | "number"
-      | "password"
-      | "range"
-      | "search"
-      | "tel"
-      | "text"
-      | "time"
-      | "url"
-      | "week";
+export const Input = forwardRef<HTMLInputElement, ComponentProps<"input">>(
+  ({ value, defaultValue, checked, defaultChecked, ...props }, ref) => {
+    const { renderer } = useContext(ReactSdkContext);
+    // enfroce default value update
+    const key =
+      renderer === "canvas"
+        ? String(value ?? defaultValue) + String(checked ?? defaultChecked)
+        : undefined;
+    return (
+      <input
+        {...props}
+        key={key}
+        defaultValue={value ?? defaultValue}
+        defaultChecked={checked ?? defaultChecked}
+        ref={ref}
+      />
+    );
   }
-  // Make sure children are not passed down to an input, because this will result in error.
->(
-  (
-    { children: _children, type = "text", value, defaultValue, ...props },
-    ref
-  ) => (
-    <input
-      {...props}
-      defaultValue={value ?? defaultValue}
-      type={type}
-      ref={ref}
-    />
-  )
 );
 
 Input.displayName = "Input";
diff --git a/packages/sdk-components-react/src/input.ws.ts b/packages/sdk-components-react/src/input.ws.ts
index 3581a03f8833..31324f1f5c75 100644
--- a/packages/sdk-components-react/src/input.ws.ts
+++ b/packages/sdk-components-react/src/input.ws.ts
@@ -1,6 +1,5 @@
 import type { PresetStyle, WsComponentMeta } from "@webstudio-is/sdk";
 import { input } from "@webstudio-is/sdk/normalize.css";
-import type { defaultTag } from "./input";
 import { props } from "./__generated__/input.props";
 
 const presetStyle = {
@@ -11,15 +10,11 @@ const presetStyle = {
       value: { type: "keyword", value: "block" },
     },
   ],
-} satisfies PresetStyle<typeof defaultTag>;
+} satisfies PresetStyle<"input">;
 
 export const meta: WsComponentMeta = {
-  category: "forms",
   label: "Text Input",
-  description:
-    "A single-line text input for collecting string data from your users.",
   presetStyle,
-  order: 3,
   initialProps: [
     "id",
     "class",
diff --git a/packages/sdk-components-react/src/label.template.tsx b/packages/sdk-components-react/src/label.template.tsx
deleted file mode 100644
index 6e85b4c9fcdd..000000000000
--- a/packages/sdk-components-react/src/label.template.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { type TemplateMeta, $, PlaceholderValue } from "@webstudio-is/template";
-
-export const meta: TemplateMeta = {
-  category: "forms",
-  order: 2,
-  template: <$.Label>{new PlaceholderValue("Form Label")}</$.Label>,
-};
diff --git a/packages/sdk-components-react/src/option.tsx b/packages/sdk-components-react/src/option.tsx
index ecbdd52ecd21..38efff06e90e 100644
--- a/packages/sdk-components-react/src/option.tsx
+++ b/packages/sdk-components-react/src/option.tsx
@@ -1,10 +1,7 @@
-import { forwardRef, type ElementRef, type ComponentProps } from "react";
+import { forwardRef, type ComponentProps } from "react";
 
-export const defaultTag = "option";
-
-export const Option = forwardRef<
-  ElementRef<typeof defaultTag>,
-  ComponentProps<typeof defaultTag>
->((props, ref) => <option {...props} ref={ref} />);
+export const Option = forwardRef<HTMLOptionElement, ComponentProps<"option">>(
+  (props, ref) => <option {...props} ref={ref} />
+);
 
 Option.displayName = "Option";
diff --git a/packages/sdk-components-react/src/option.ws.ts b/packages/sdk-components-react/src/option.ws.ts
index 285abf79298c..02c75e4203f8 100644
--- a/packages/sdk-components-react/src/option.ws.ts
+++ b/packages/sdk-components-react/src/option.ws.ts
@@ -1,6 +1,4 @@
 import type { PresetStyle, WsComponentMeta } from "@webstudio-is/sdk";
-
-import type { defaultTag } from "./option";
 import { props } from "./__generated__/option.props";
 
 const presetStyle = {
@@ -17,7 +15,7 @@ const presetStyle = {
       },
     },
   ],
-} satisfies PresetStyle<typeof defaultTag>;
+} satisfies PresetStyle<"option">;
 
 export const meta: WsComponentMeta = {
   category: "hidden",
@@ -34,6 +32,6 @@ export const meta: WsComponentMeta = {
     { selector: ":hover", label: "Hover" },
     { selector: ":disabled", label: "Disabled" },
   ],
-  initialProps: ["label", "selected", "value", "label", "disabled"],
+  initialProps: ["label", "value", "label", "disabled"],
   props,
 };
diff --git a/packages/sdk-components-react/src/radio-button.template.tsx b/packages/sdk-components-react/src/radio-button.template.tsx
deleted file mode 100644
index d9c010b6bd4c..000000000000
--- a/packages/sdk-components-react/src/radio-button.template.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { type TemplateMeta, $, PlaceholderValue } from "@webstudio-is/template";
-
-export const meta: TemplateMeta = {
-  category: "forms",
-  description:
-    "Use within a form to allow your users to select a single option from a set of mutually exclusive choices. Group multiple radios by matching their “Name” properties.",
-  order: 5,
-  template: (
-    <$.Label ws:label="Radio Field">
-      <$.RadioButton />
-      <$.Text ws:label="Radio Label" ws:tag="span">
-        {new PlaceholderValue("Radio")}
-      </$.Text>
-    </$.Label>
-  ),
-};
diff --git a/packages/sdk-components-react/src/select.template.tsx b/packages/sdk-components-react/src/select.template.tsx
deleted file mode 100644
index e105c8d4858e..000000000000
--- a/packages/sdk-components-react/src/select.template.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { type TemplateMeta, $ } from "@webstudio-is/template";
-
-export const meta: TemplateMeta = {
-  category: "forms",
-  description:
-    "A drop-down menu for users to select a single option from a predefined list.",
-  order: 4,
-  template: (
-    <$.Select>
-      <$.Option label="Please choose an option" value=""></$.Option>
-      <$.Option label="Option A" value="a" />
-      <$.Option label="Option B" value="b" />
-      <$.Option label="Option C" value="c" />
-    </$.Select>
-  ),
-};
diff --git a/packages/sdk-components-react/src/select.tsx b/packages/sdk-components-react/src/select.tsx
index 9ffa3f405587..bf0401b9246c 100644
--- a/packages/sdk-components-react/src/select.tsx
+++ b/packages/sdk-components-react/src/select.tsx
@@ -1,32 +1,41 @@
-import { type Hook } from "@webstudio-is/react-sdk/runtime";
-import { forwardRef, type ElementRef, type ComponentProps } from "react";
+import { forwardRef, useContext, type ComponentProps } from "react";
+import { ReactSdkContext, type Hook } from "@webstudio-is/react-sdk/runtime";
 
-export const defaultTag = "select";
-
-export const Select = forwardRef<
-  ElementRef<typeof defaultTag>,
-  ComponentProps<typeof defaultTag>
->(({ value, defaultValue, ...props }, ref) => (
-  <select {...props} defaultValue={value ?? defaultValue} ref={ref} />
-));
+export const Select = forwardRef<HTMLSelectElement, ComponentProps<"select">>(
+  ({ value, defaultValue, ...props }, ref) => {
+    const { renderer } = useContext(ReactSdkContext);
+    // enfroce default value update
+    const key =
+      renderer === "canvas" ? String(value ?? defaultValue) : undefined;
+    return (
+      <select
+        {...props}
+        key={key}
+        defaultValue={value ?? defaultValue}
+        ref={ref}
+      />
+    );
+  }
+);
 
 Select.displayName = "Select";
 
-// For each CollapsibleContent component within the selection,
-// we identify its closest parent Collapsible component
-// and update its open prop bound to variable.
 export const hooksSelect: Hook = {
   onNavigatorUnselect: (context, event) => {
     for (const instance of event.instancePath) {
-      if (instance.component === `Option`) {
-        context.setMemoryProp(instance, "selected", undefined);
+      if (instance.component === "Select" || instance.tag === "select") {
+        context.setMemoryProp(instance, "value", undefined);
       }
     }
   },
   onNavigatorSelect: (context, event) => {
+    let selectedOption: undefined | string;
     for (const instance of event.instancePath) {
-      if (instance.component === `Option`) {
-        context.setMemoryProp(instance, "selected", true);
+      if (instance.component === "Option" || instance.tag === "option") {
+        selectedOption = context.getPropValue(instance, "value") as string;
+      }
+      if (instance.component === "Select" || instance.tag === "select") {
+        context.setMemoryProp(instance, "value", selectedOption);
       }
     }
   },
diff --git a/packages/sdk-components-react/src/select.ws.ts b/packages/sdk-components-react/src/select.ws.ts
index 76e1ab177e43..3fd9a79e6ee2 100644
--- a/packages/sdk-components-react/src/select.ws.ts
+++ b/packages/sdk-components-react/src/select.ws.ts
@@ -1,6 +1,5 @@
 import type { PresetStyle, WsComponentMeta } from "@webstudio-is/sdk";
 import { select } from "@webstudio-is/sdk/normalize.css";
-import type { defaultTag } from "./select";
 import { props } from "./__generated__/select.props";
 
 const presetStyle = {
@@ -11,7 +10,7 @@ const presetStyle = {
       value: { type: "keyword", value: "block" },
     },
   ],
-} satisfies PresetStyle<typeof defaultTag>;
+} satisfies PresetStyle<"select">;
 
 export const meta: WsComponentMeta = {
   presetStyle,
diff --git a/packages/sdk-components-react/src/templates.ts b/packages/sdk-components-react/src/templates.ts
index 9c5881d8965a..61475c00b628 100644
--- a/packages/sdk-components-react/src/templates.ts
+++ b/packages/sdk-components-react/src/templates.ts
@@ -1,12 +1,7 @@
 export { meta as ContentEmbed } from "./content-embed.template";
 export { meta as MarkdownEmbed } from "./markdown-embed.template";
 export { meta as Link } from "./link.template";
-export { meta as Button } from "./button.template";
 export { meta as Form } from "./webhook-form.template";
-export { meta as Label } from "./label.template";
-export { meta as RadioButton } from "./radio-button.template";
-export { meta as Checkbox } from "./checkbox.template";
 export { meta as Vimeo } from "./vimeo.template";
 export { meta as YouTube } from "./youtube.template";
-export { meta as Select } from "./select.template";
 export { meta as HeadSlot } from "./head-slot.template";
diff --git a/packages/sdk-components-react/src/textarea.tsx b/packages/sdk-components-react/src/textarea.tsx
index 596601b2f29c..5d28669c1cd6 100644
--- a/packages/sdk-components-react/src/textarea.tsx
+++ b/packages/sdk-components-react/src/textarea.tsx
@@ -1,13 +1,21 @@
-import { forwardRef, type ElementRef, type ComponentProps } from "react";
-
-export const defaultTag = "textarea";
+import { forwardRef, useContext, type ComponentProps } from "react";
+import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 
 export const Textarea = forwardRef<
-  ElementRef<typeof defaultTag>,
-  ComponentProps<typeof defaultTag>
-  // Make sure children are not passed down to an textarea, because this will result in error.
->(({ children: _children, value, defaultValue, ...props }, ref) => (
-  <textarea {...props} defaultValue={value ?? defaultValue} ref={ref} />
-));
+  HTMLTextAreaElement,
+  ComponentProps<"textarea">
+>(({ value, defaultValue, ...props }, ref) => {
+  const { renderer } = useContext(ReactSdkContext);
+  // enfroce default value update
+  const key = renderer === "canvas" ? String(value ?? defaultValue) : undefined;
+  return (
+    <textarea
+      {...props}
+      key={key}
+      defaultValue={value ?? defaultValue}
+      ref={ref}
+    />
+  );
+});
 
 Textarea.displayName = "Textarea";
diff --git a/packages/sdk-components-react/src/textarea.ws.ts b/packages/sdk-components-react/src/textarea.ws.ts
index 7dd4d4cac0b4..d63a56d08a62 100644
--- a/packages/sdk-components-react/src/textarea.ws.ts
+++ b/packages/sdk-components-react/src/textarea.ws.ts
@@ -1,6 +1,5 @@
 import type { WsComponentMeta, PresetStyle } from "@webstudio-is/sdk";
 import { textarea } from "@webstudio-is/sdk/normalize.css";
-import type { defaultTag } from "./textarea";
 import { props } from "./__generated__/textarea.props";
 
 const presetStyle = {
@@ -13,15 +12,11 @@ const presetStyle = {
       value: { type: "keyword", value: "block" },
     },
   ],
-} satisfies PresetStyle<typeof defaultTag>;
+} satisfies PresetStyle<"textarea">;
 
 export const meta: WsComponentMeta = {
-  category: "forms",
   label: "Text Area",
-  description:
-    "A multi-line text input for collecting longer string data from your users.",
   presetStyle,
-  order: 4,
   contentModel: {
     category: "instance",
     children: [],
diff --git a/packages/sdk/src/core-templates.tsx b/packages/sdk/src/core-templates.tsx
index 46a0cfda5c9a..67bec7b84a4a 100644
--- a/packages/sdk/src/core-templates.tsx
+++ b/packages/sdk/src/core-templates.tsx
@@ -3,6 +3,7 @@ import {
   css,
   expression,
   Parameter,
+  PlaceholderValue,
   ws,
   type TemplateMeta,
 } from "@webstudio-is/template";
@@ -12,6 +13,7 @@ import {
   descendantComponent,
   elementComponent,
 } from "./core-metas";
+import { CheckboxCheckedIcon, RadioCheckedIcon } from "@webstudio-is/icons/svg";
 
 const elementMeta: TemplateMeta = {
   category: "general",
@@ -108,7 +110,6 @@ const blockMeta: TemplateMeta = {
 const typography: Record<string, TemplateMeta> = {
   heading: {
     category: "typography",
-    order: 1,
     description:
       "Use HTML headings to structure and organize content. Use the Tag property in settings to change the heading level (h1-h6).",
     template: <ws.element ws:tag="h1"></ws.element>,
@@ -116,14 +117,12 @@ const typography: Record<string, TemplateMeta> = {
 
   paragraph: {
     category: "typography",
-    order: 2,
     description: "A container for multi-line text.",
     template: <ws.element ws:tag="p"></ws.element>,
   },
 
   blockquote: {
     category: "typography",
-    order: 3,
     description:
       "Use to style a quote from an external source like an article or book.",
     template: (
@@ -141,7 +140,6 @@ const typography: Record<string, TemplateMeta> = {
 
   list: {
     category: "typography",
-    order: 4,
     description: "Groups content, like links in a menu or steps in a recipe.",
     template: (
       <ws.element ws:tag="ul">
@@ -154,14 +152,12 @@ const typography: Record<string, TemplateMeta> = {
 
   list_item: {
     category: "typography",
-    order: 5,
     description: "Adds a new item to an existing list.",
     template: <ws.element ws:tag="li"></ws.element>,
   },
 
   code_text: {
     category: "typography",
-    order: 6,
     template: (
       <ws.element
         ws:tag="code"
@@ -179,7 +175,6 @@ const typography: Record<string, TemplateMeta> = {
 
   thematic_break: {
     category: "typography",
-    order: 7,
     description:
       "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
     template: (
@@ -194,10 +189,157 @@ const typography: Record<string, TemplateMeta> = {
   },
 };
 
+const forms: Record<string, TemplateMeta> = {
+  form: {
+    category: "forms",
+    description: "Create filters, surveys, searches and more.",
+    template: (
+      <ws.element ws:tag="form">
+        <ws.element
+          ws:tag="input"
+          ws:style={css`
+            display: block;
+          `}
+        />
+        <ws.element ws:tag="button">
+          {new PlaceholderValue("Submit")}
+        </ws.element>
+      </ws.element>
+    ),
+  },
+
+  button: {
+    category: "forms",
+    description:
+      "Use a button to submit forms or trigger actions within a page. Do not use a button to navigate users to another resource or another page - that’s what a link is used for.",
+    template: (
+      <ws.element ws:tag="button">{new PlaceholderValue("Button")}</ws.element>
+    ),
+  },
+
+  input_label: {
+    category: "forms",
+    template: (
+      <ws.element
+        ws:tag="label"
+        ws:style={css`
+          display: block;
+        `}
+      >
+        {new PlaceholderValue("Label")}
+      </ws.element>
+    ),
+  },
+
+  text_input: {
+    category: "forms",
+    description:
+      "A single-line text input for collecting string data from your users.",
+    template: (
+      <ws.element
+        ws:tag="input"
+        ws:style={css`
+          display: block;
+        `}
+      />
+    ),
+  },
+
+  text_area: {
+    category: "forms",
+    description:
+      "A multi-line text input for collecting longer string data from your users.",
+    template: (
+      <ws.element
+        ws:tag="textarea"
+        ws:style={css`
+          display: block;
+        `}
+      />
+    ),
+  },
+
+  select: {
+    category: "forms",
+    description:
+      "A drop-down menu for users to select a single option from a predefined list.",
+    template: (
+      <ws.element
+        ws:tag="select"
+        ws:style={css`
+          display: block;
+        `}
+      >
+        <ws.element ws:tag="option" label="Please choose an option" value="" />
+        <ws.element ws:tag="option" label="Option A" value="a" />
+        <ws.element ws:tag="option" label="Option B" value="b" />
+        <ws.element ws:tag="option" label="Option C" value="c" />
+      </ws.element>
+    ),
+  },
+
+  radio: {
+    category: "forms",
+    description:
+      "Use within a form to allow your users to select a single option from a set of mutually exclusive choices. Group multiple radios by matching their “Name” properties.",
+    icon: RadioCheckedIcon,
+    template: (
+      <ws.element
+        ws:tag="label"
+        ws:label="Radio Field"
+        ws:style={css`
+          display: block;
+        `}
+      >
+        <ws.element
+          ws:tag="input"
+          ws:style={css`
+            border-style: none;
+            margin-right: 0.5em;
+          `}
+          type="radio"
+        />
+        <ws.element ws:tag="span" ws:label="Radio Label">
+          {new PlaceholderValue("Radio")}
+        </ws.element>
+      </ws.element>
+    ),
+  },
+
+  checkbox: {
+    category: "forms",
+    description:
+      "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their “Name” properties. Unlike radios, any number of checkboxes in a group can be checked.",
+    icon: CheckboxCheckedIcon,
+    template: (
+      <ws.element
+        ws:tag="label"
+        ws:label="Checkbox Field"
+        ws:style={css`
+          display: block;
+        `}
+      >
+        <ws.element
+          ws:tag="input"
+          ws:style={css`
+            border-style: none;
+            margin-right: 0.5em;
+          `}
+          type="checkbox"
+        />
+        <ws.element ws:tag="span" ws:label="Checkbox Label">
+          {new PlaceholderValue("Checkbox")}
+        </ws.element>
+      </ws.element>
+    ),
+  },
+};
+
 export const coreTemplates = {
   [elementComponent]: elementMeta,
   [collectionComponent]: collectionMeta,
   [descendantComponent]: descendantMeta,
   [blockComponent]: blockMeta,
   ...typography,
+  ...forms,
 };