\n Email\n\n \n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"s7jei7y72\",\"name\":\"code\",\"code\":\"export default function App() {\\n return (\\n

\\n Email\\n\\n \\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b6385c68-72dc-449b-b86a-eaeca9b219cc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"e340edc4-c546-4388-85ce-1a02900f27cd","type":"procode","props":{"code":"htmlFor connects label to input id.\n","language":"txt","filename":"","files":"[{\"id\":\"6cyfgh0gh\",\"name\":\"code\",\"code\":\"htmlFor connects label to input id.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ddff19ad-0f86-4cc9-817e-879ad49e1380","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs recommend associating labels with inputs, either by nesting the input inside ","styles":{}},{"type":"text","text":"","styles":{"code":true}},{"type":"text","text":" or by using matching ","styles":{}},{"type":"text","text":"htmlFor","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"id","styles":{"code":true}},{"type":"text","text":", because labels help browser focus behavior and screen reader accessibility.","styles":{}}],"children":[]},{"id":"ed3af328-68a9-432a-9ed1-3fd5f5e9f564","type":"divider","props":{},"children":[]},{"id":"955f4b24-1271-4116-8f2f-f131b27f5c97","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Controlled Input","styles":{}}],"children":[]},{"id":"3328cebe-e12b-4029-b3b3-bd938fd9bc6e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"A ","styles":{}},{"type":"text","text":"controlled input","styles":{"bold":true}},{"type":"text","text":" is an input controlled by React state.","styles":{}}],"children":[]},{"id":"83656222-122a-490a-9f5b-f5976f0a8066","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function NameInput() {\n const [name, setName] = useState(\"\")\n\n return (\n

\n Name\n\n setName(event.target.value)}\n placeholder=\"Enter your name\"\n />\n\n

Your name: {name}

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"45pvtwdss\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function NameInput() {\\n const [name, setName] = useState(\\\"\\\")\\n\\n return (\\n

\\n Name\\n\\n setName(event.target.value)}\\n placeholder=\\\"Enter your name\\\"\\n />\\n\\n

Your name: {name}

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"751da6c8-439c-469f-81b9-751029c1f874","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Flow:","styles":{}}],"children":[]},{"id":"df372dfa-3db0-41b4-9f4e-dec2bb3157a0","type":"procode","props":{"code":"User types\n├── onChange runs\n├── setName updates state\n├── component re-renders\n└── input shows latest value\n","language":"txt","filename":"","files":"[{\"id\":\"yyow24igl\",\"name\":\"code\",\"code\":\"User types\\n├── onChange runs\\n├── setName updates state\\n├── component re-renders\\n└── input shows latest value\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3a298a74-cd20-42bf-bcb3-2f172dbbcc08","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"323337a5-45af-4a90-8f92-a1b1c80801ce","type":"procode","props":{"code":"value + onChange = controlled input\n","language":"txt","filename":"","files":"[{\"id\":\"id5l26ydj\",\"name\":\"code\",\"code\":\"value + onChange = controlled input\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ce4183da-57a9-435a-b3a0-b9d46c94b449","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs define this pattern as controlling an input with a state variable. The input receives ","styles":{}},{"type":"text","text":"value","styles":{"code":true}},{"type":"text","text":", and ","styles":{}},{"type":"text","text":"onChange","styles":{"code":true}},{"type":"text","text":" updates that state on every edit.","styles":{}}],"children":[]},{"id":"b9dc5643-c457-44e1-9119-d788cd07e78c","type":"divider","props":{},"children":[]},{"id":"19e543b9-baa9-4ec4-99d9-dd032a25af1a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"value and onChange","styles":{}}],"children":[]},{"id":"05711a31-eb1d-40ee-8daf-9acb1d50bb5a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For text input:","styles":{}}],"children":[]},{"id":"1e1c9325-2418-466c-8952-6886aa6af370","type":"procode","props":{"code":" setEmail(event.target.value)}\n/>\n","language":"tsx","filename":"","files":"[{\"id\":\"5pvit3jaq\",\"name\":\"code\",\"code\":\" setEmail(event.target.value)}\\n/>\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c273392c-bb91-4a4c-b32c-2ffce637fc29","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Meaning:","styles":{}}],"children":[]},{"id":"0aa28c19-fff4-4fa7-a579-02ee53deabbb","type":"procode","props":{"code":"value\n└── current input value from state\n\nonChange\n└── updates state when user types\n","language":"txt","filename":"","files":"[{\"id\":\"golna1jwb\",\"name\":\"code\",\"code\":\"value\\n└── current input value from state\\n\\nonChange\\n└── updates state when user types\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"daa23923-fb2b-4712-beeb-efa799cf5d74","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"098ad120-caec-4ef7-aaf3-de46c4584bb9","type":"procode","props":{"code":"value shows state.\nonChange changes state.\n","language":"txt","filename":"","files":"[{\"id\":\"lp1xfh2e3\",\"name\":\"code\",\"code\":\"value shows state.\\nonChange changes state.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7b840ecf-7d6c-43d8-a46d-8f43db9293ba","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Important:","styles":{}}],"children":[]},{"id":"6b80e867-9e49-417b-bdc9-b9ac6294a0b3","type":"procode","props":{"code":"If you use value, you need onChange.\n","language":"txt","filename":"","files":"[{\"id\":\"0jt0ixwud\",\"name\":\"code\",\"code\":\"If you use value, you need onChange.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"57f672c7-2a5c-41ed-bfd9-634d960e58d7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs say every controlled input needs an ","styles":{}},{"type":"text","text":"onChange","styles":{"code":true}},{"type":"text","text":" event handler that synchronously updates its backing value.","styles":{}}],"children":[]},{"id":"7811264d-1387-469c-8d8a-fb1c0c3116d6","type":"divider","props":{},"children":[]},{"id":"7b73d212-064b-40b8-88e1-1164e11e3d86","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"TypeScript Input Event","styles":{}}],"children":[]},{"id":"97e9bc8b-3549-4244-9f29-7d600f00e559","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"In TypeScript, use this event type:","styles":{}}],"children":[]},{"id":"fc033fde-b994-458a-8463-865541086dd0","type":"procode","props":{"code":"React.ChangeEvent\n","language":"tsx","filename":"","files":"[{\"id\":\"mj8ajjbmm\",\"name\":\"code\",\"code\":\"React.ChangeEvent\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a3863fdf-69cb-47e8-9f3b-bb7f4579660a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"c725fffd-7146-4cae-9eca-fba108f5a8c4","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function EmailInput() {\n const [email, setEmail] = useState(\"\")\n\n function handleChange(event: React.ChangeEvent) {\n setEmail(event.target.value)\n }\n\n return (\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"rc84w361l\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function EmailInput() {\\n const [email, setEmail] = useState(\\\"\\\")\\n\\n function handleChange(event: React.ChangeEvent) {\\n setEmail(event.target.value)\\n }\\n\\n return (\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0dda64de-1ed2-4e16-a5ea-4a42000fe365","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"793778a6-7cf7-4f8b-b9ec-15b5cd66a8f7","type":"procode","props":{"code":"HTMLInputElement = input element type\n","language":"txt","filename":"","files":"[{\"id\":\"5qqqph16t\",\"name\":\"code\",\"code\":\"HTMLInputElement = input element type\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"69728826-0dd1-4748-b876-1a5a1c557e07","type":"divider","props":{},"children":[]},{"id":"cc1e540c-23d2-47e9-a336-eab257e8a431","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Text Input","styles":{}}],"children":[]},{"id":"ad4d71fa-f881-4175-858c-2d9133c547b7","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function TextInput() {\n const [text, setText] = useState(\"\")\n\n return (\n setText(event.target.value)}\n placeholder=\"Type something...\"\n />\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"9gwue00p3\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function TextInput() {\\n const [text, setText] = useState(\\\"\\\")\\n\\n return (\\n setText(event.target.value)}\\n placeholder=\\\"Type something...\\\"\\n />\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1801ef59-1578-4b93-85a3-75521723cf9b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"dc5f0f06-ed43-4276-8348-015a6361b2d3","type":"procode","props":{"code":"type=\"text\" = normal text input\n","language":"txt","filename":"","files":"[{\"id\":\"c1dqqdesm\",\"name\":\"code\",\"code\":\"type=\\\"text\\\" = normal text input\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"73f7c818-ad36-44f5-838d-1337f7ea27d2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use for:","styles":{}}],"children":[]},{"id":"9ed25788-cb36-4b7e-ad64-eebb53e1948c","type":"procode","props":{"code":"Name\nUsername\nTitle\nSearch keyword\nShort text\n","language":"txt","filename":"","files":"[{\"id\":\"21poyrets\",\"name\":\"code\",\"code\":\"Name\\nUsername\\nTitle\\nSearch keyword\\nShort text\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"11e48823-35d8-4452-b711-4b0aa7370222","type":"divider","props":{},"children":[]},{"id":"60c67835-8ea4-40ae-85b1-74161fce891f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Email Input","styles":{}}],"children":[]},{"id":"de258539-e1b8-4f3b-b01e-94826b50884f","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function EmailInput() {\n const [email, setEmail] = useState(\"\")\n\n return (\n setEmail(event.target.value)}\n placeholder=\"you@example.com\"\n />\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"jcgczn4wd\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function EmailInput() {\\n const [email, setEmail] = useState(\\\"\\\")\\n\\n return (\\n setEmail(event.target.value)}\\n placeholder=\\\"you@example.com\\\"\\n />\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"30e84c1b-8ab3-44b6-ae11-f69c3ff31f45","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"9e934c59-9721-499a-9adc-5da33ea3b3fb","type":"procode","props":{"code":"type=\"email\" = email input\n","language":"txt","filename":"","files":"[{\"id\":\"rlllbb8oa\",\"name\":\"code\",\"code\":\"type=\\\"email\\\" = email input\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"87361e99-c920-4231-8103-e7bf8debc5cb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use for:","styles":{}}],"children":[]},{"id":"e741b0c9-734c-4b14-96ae-8f0054f79358","type":"procode","props":{"code":"Login form\nRegister form\nNewsletter form\nContact form\n","language":"txt","filename":"","files":"[{\"id\":\"k9vh7tza5\",\"name\":\"code\",\"code\":\"Login form\\nRegister form\\nNewsletter form\\nContact form\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"60a22da9-be08-4b83-941d-72bbd83d2911","type":"divider","props":{},"children":[]},{"id":"fd7b4f57-07cb-4ac1-a59e-7721a91f9356","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Password Input","styles":{}}],"children":[]},{"id":"3ce16b72-0c2e-49a5-ac7b-728785298d28","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function PasswordInput() {\n const [password, setPassword] = useState(\"\")\n\n return (\n setPassword(event.target.value)}\n placeholder=\"Enter password\"\n />\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"pcyuvp6rx\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function PasswordInput() {\\n const [password, setPassword] = useState(\\\"\\\")\\n\\n return (\\n setPassword(event.target.value)}\\n placeholder=\\\"Enter password\\\"\\n />\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d71a4706-6a68-42c2-8f5e-034c29df2aae","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"bb7c75be-f143-4428-b3d0-b4eddc94911a","type":"procode","props":{"code":"type=\"password\" hides typed characters.\n","language":"txt","filename":"","files":"[{\"id\":\"y1jvfs2rt\",\"name\":\"code\",\"code\":\"type=\\\"password\\\" hides typed characters.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"336df6b6-dcbd-495b-b0df-1df5d9e2c9ef","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use for:","styles":{}}],"children":[]},{"id":"d472d449-2637-440d-9178-329afff77f1b","type":"procode","props":{"code":"Login password\nRegister password\nConfirm password\n","language":"txt","filename":"","files":"[{\"id\":\"oa7gjudiz\",\"name\":\"code\",\"code\":\"Login password\\nRegister password\\nConfirm password\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"512153f7-0b52-425e-89a9-dc86fda7bc2f","type":"divider","props":{},"children":[]},{"id":"3849e230-3d06-4e39-bdc3-a44a505677e6","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Number Input","styles":{}}],"children":[]},{"id":"a9d74521-575e-4fce-beef-737061e01d7e","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function AgeInput() {\n const [age, setAge] = useState(\"\")\n\n return (\n setAge(event.target.value)}\n placeholder=\"Enter your age\"\n />\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"343safcri\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function AgeInput() {\\n const [age, setAge] = useState(\\\"\\\")\\n\\n return (\\n setAge(event.target.value)}\\n placeholder=\\\"Enter your age\\\"\\n />\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c833dfad-3aed-4435-985b-a17f78a2e7d6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Important:","styles":{}}],"children":[]},{"id":"89aa2d25-b1f8-4a87-8435-bc2c40eb0bb4","type":"procode","props":{"code":"event.target.value is still a string.\n","language":"txt","filename":"","files":"[{\"id\":\"vrbqxtakh\",\"name\":\"code\",\"code\":\"event.target.value is still a string.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b0c39838-77d5-4edd-afef-59a5d462b4ec","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If you need number:","styles":{}}],"children":[]},{"id":"55545105-70ad-44b3-81cf-8fa9e910e346","type":"procode","props":{"code":"const value = Number(event.target.value)\n","language":"tsx","filename":"","files":"[{\"id\":\"8wu432iqj\",\"name\":\"code\",\"code\":\"const value = Number(event.target.value)\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6a9aa2c9-5f56-49d5-a677-09fdce7269e3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"339048ca-dc7e-46ee-a264-f7e1b4890750","type":"procode","props":{"code":"function handleChange(event: React.ChangeEvent) {\n const value = Number(event.target.value)\n\n console.log(value)\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"4lgmlujnr\",\"name\":\"code\",\"code\":\"function handleChange(event: React.ChangeEvent) {\\n const value = Number(event.target.value)\\n\\n console.log(value)\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"56d4cc1d-1c7b-4d8b-b2bb-46f12a7a4b4e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"5396cf32-29eb-4138-aff8-2529857bf693","type":"procode","props":{"code":"Number input value from DOM is usually read as string.\nConvert it when needed.\n","language":"txt","filename":"","files":"[{\"id\":\"raqzhleev\",\"name\":\"code\",\"code\":\"Number input value from DOM is usually read as string.\\nConvert it when needed.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fcf6c12e-f1bd-48aa-8eb1-13f889611dbd","type":"divider","props":{},"children":[]},{"id":"1a6322e8-7bf3-4a7f-bd67-aea806683a29","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Search Input","styles":{}}],"children":[]},{"id":"db9ebe19-e7b9-4a81-b673-9388e9ed5fb0","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function SearchInput() {\n const [search, setSearch] = useState(\"\")\n\n return (\n setSearch(event.target.value)}\n placeholder=\"Search...\"\n />\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"f4k6y5i9o\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function SearchInput() {\\n const [search, setSearch] = useState(\\\"\\\")\\n\\n return (\\n setSearch(event.target.value)}\\n placeholder=\\\"Search...\\\"\\n />\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"11d80649-f8ca-4dce-a121-fe8f68de4226","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"3380000e-86b8-41ca-9e35-c5a99d1541bd","type":"procode","props":{"code":"type=\"search\" = input for search keyword\n","language":"txt","filename":"","files":"[{\"id\":\"hncjg3ovr\",\"name\":\"code\",\"code\":\"type=\\\"search\\\" = input for search keyword\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0b7c2a08-7ba5-42dc-bf15-931422edb850","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use for:","styles":{}}],"children":[]},{"id":"780d9ff1-7c53-4315-a065-8b59a845adef","type":"procode","props":{"code":"Search products\nSearch users\nSearch posts\nSearch dashboard data\n","language":"txt","filename":"","files":"[{\"id\":\"we71f9mdz\",\"name\":\"code\",\"code\":\"Search products\\nSearch users\\nSearch posts\\nSearch dashboard data\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7edb0452-eccc-4cf7-be4b-7adcd907b26e","type":"divider","props":{},"children":[]},{"id":"cec45630-c358-4e73-a3d4-e2806c4acb2b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Input with Default Value","styles":{}}],"children":[]},{"id":"34a66e63-e524-4c11-a282-02689596b607","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use ","styles":{}},{"type":"text","text":"defaultValue","styles":{"code":true}},{"type":"text","text":" for uncontrolled input initial value.","styles":{}}],"children":[]},{"id":"5fb78c64-80c4-42fd-b76d-053c53adc1e1","type":"procode","props":{"code":"export default function App() {\n return (\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"emqexsjyw\",\"name\":\"code\",\"code\":\"export default function App() {\\n return (\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ffd0c697-6a1c-4cc9-a78b-19c4d503886d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"697e8a0e-e43a-4359-8872-87ddb6519502","type":"procode","props":{"code":"defaultValue = initial value only\n","language":"txt","filename":"","files":"[{\"id\":\"gz8hhqi38\",\"name\":\"code\",\"code\":\"defaultValue = initial value only\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7be02417-e1c5-4131-8cd4-03ece7306263","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Difference:","styles":{}}],"children":[]},{"id":"8b42ea4e-7917-4886-8fb0-b93345c34dbb","type":"procode","props":{"code":"value → controlled by React state\ndefaultValue → initial value only, then browser manages it\n","language":"txt","filename":"","files":"[{\"id\":\"69xrmiyck\",\"name\":\"code\",\"code\":\"value → controlled by React state\\ndefaultValue → initial value only, then browser manages it\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cd0f2994-a3ff-4d2f-8624-da30f806e88e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs say ","styles":{}},{"type":"text","text":"defaultValue","styles":{"code":true}},{"type":"text","text":" specifies the initial value for a text input, while ","styles":{}},{"type":"text","text":"defaultChecked","styles":{"code":true}},{"type":"text","text":" is used for checkbox and radio initial values.","styles":{}}],"children":[]},{"id":"5aacf2b7-35c5-4a8a-bcb3-f961a08a051d","type":"divider","props":{},"children":[]},{"id":"4c89f12c-9ada-4b21-bbe1-7a1def7d4e26","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Controlled vs Uncontrolled Input","styles":{}}],"children":[]},{"id":"44b87e9a-f1fd-4d1f-91ce-4333eaf38edd","type":"procode","props":{"code":"Controlled Input\n├── Uses value\n├── Uses onChange\n├── React state controls value\n└── Good for validation and dynamic UI\n\nUncontrolled Input\n├── Uses defaultValue\n├── Browser controls value\n├── Read value on submit or with ref\n└── Good for simpler forms\n","language":"txt","filename":"","files":"[{\"id\":\"bjjxupfxf\",\"name\":\"code\",\"code\":\"Controlled Input\\n├── Uses value\\n├── Uses onChange\\n├── React state controls value\\n└── Good for validation and dynamic UI\\n\\nUncontrolled Input\\n├── Uses defaultValue\\n├── Browser controls value\\n├── Read value on submit or with ref\\n└── Good for simpler forms\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1c70df8a-13c5-4b13-9102-5b62899d95ef","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Controlled:","styles":{}}],"children":[]},{"id":"ee8c740b-1ba4-4771-83bb-fb5f9faa59e8","type":"procode","props":{"code":" setName(e.target.value)} />\n","language":"tsx","filename":"","files":"[{\"id\":\"sp0hv43qb\",\"name\":\"code\",\"code\":\" setName(e.target.value)} />\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fc426739-c5d1-4e81-9974-a62de60facdd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Uncontrolled:","styles":{}}],"children":[]},{"id":"1eadb149-29b4-4efd-b38a-125c3973b50f","type":"procode","props":{"code":"\n","language":"tsx","filename":"","files":"[{\"id\":\"i4kdnmntl\",\"name\":\"code\",\"code\":\"\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8b74af43-433c-4693-98b2-8c465f165800","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"05fc4510-c809-42d4-940b-f990e8ef14a1","type":"procode","props":{"code":"Need live validation or dynamic UI? Use controlled input.\nOnly need value on submit? Uncontrolled can be enough.\n","language":"txt","filename":"","files":"[{\"id\":\"oevx3ikpk\",\"name\":\"code\",\"code\":\"Need live validation or dynamic UI? Use controlled input.\\nOnly need value on submit? Uncontrolled can be enough.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3539b0b3-f5c4-42f5-8879-a552b8381d21","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs explain that an input cannot be both controlled and uncontrolled at the same time, and it should not switch between controlled and uncontrolled over its lifetime.","styles":{}}],"children":[]},{"id":"8f381a8b-a0eb-44c5-a4ac-0ff8c37e4a83","type":"divider","props":{},"children":[]},{"id":"7246127e-596f-4262-936d-6e9e051619dd","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Reading Input on Submit","styles":{}}],"children":[]},{"id":"da66bb8f-44f5-4f34-bd3a-38ffa784476b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"You can read uncontrolled input values when submitting a form.","styles":{}}],"children":[]},{"id":"95d6b857-72a9-4135-b117-b7e683681563","type":"procode","props":{"code":"export default function LoginForm() {\n function handleSubmit(event: React.FormEvent) {\n event.preventDefault()\n\n const formData = new FormData(event.currentTarget)\n const email = formData.get(\"email\")\n const password = formData.get(\"password\")\n\n console.log({\n email,\n password,\n })\n }\n\n return (\n

\n \n\n \n\n \n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"pa8e0f9wd\",\"name\":\"code\",\"code\":\"export default function LoginForm() {\\n function handleSubmit(event: React.FormEvent) {\\n event.preventDefault()\\n\\n const formData = new FormData(event.currentTarget)\\n const email = formData.get(\\\"email\\\")\\n const password = formData.get(\\\"password\\\")\\n\\n console.log({\\n email,\\n password,\\n })\\n }\\n\\n return (\\n

\\n \\n\\n \\n\\n \\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a397dd87-9bd7-4f85-9907-75dfc8af48a5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"f0575a90-b8e4-4590-93ab-3557a96b180d","type":"procode","props":{"code":"FormData reads input values from form submission.\n","language":"txt","filename":"","files":"[{\"id\":\"z7q1o5g1u\",\"name\":\"code\",\"code\":\"FormData reads input values from form submission.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4c126c71-9520-4d54-a99e-ecd039a2dfcc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs show that form values can be read in ","styles":{}},{"type":"text","text":"onSubmit","styles":{"code":true}},{"type":"text","text":" with ","styles":{}},{"type":"text","text":"new FormData(e.target)","styles":{"code":true}},{"type":"text","text":", and ","styles":{}},{"type":"text","text":"e.preventDefault()","styles":{"code":true}},{"type":"text","text":" can prevent the browser page refresh.","styles":{}}],"children":[]},{"id":"c28175fd-8ddd-41bf-a0d3-5e2c72cdffd0","type":"divider","props":{},"children":[]},{"id":"82c0dc62-c27a-4cd1-bb3f-ddaac02f98b4","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Input with Validation","styles":{}}],"children":[]},{"id":"0f69e44a-2809-455b-b024-3e790735af08","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple validation example:","styles":{}}],"children":[]},{"id":"e39f57d5-7c6f-4743-b4bb-e752d88b86a6","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function UsernameInput() {\n const [username, setUsername] = useState(\"\")\n\n const isTooShort = username.length > 0 && username.length < 3\n\n return (\n

\n Username\n\n setUsername(event.target.value)}\n placeholder=\"Enter username\"\n />\n\n {isTooShort && (\n

Username must be at least 3 characters.

\n )}\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"5nq90lp8i\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function UsernameInput() {\\n const [username, setUsername] = useState(\\\"\\\")\\n\\n const isTooShort = username.length > 0 && username.length < 3\\n\\n return (\\n

\\n Username\\n\\n setUsername(event.target.value)}\\n placeholder=\\\"Enter username\\\"\\n />\\n\\n {isTooShort && (\\n

Username must be at least 3 characters.

\\n )}\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a323a138-724a-48de-9cec-6f236b800730","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"3c12ad0f-7f1d-4f1d-94ae-43a78c199b2c","type":"procode","props":{"code":"Input state can be used for validation message.\n","language":"txt","filename":"","files":"[{\"id\":\"iohl1w1bd\",\"name\":\"code\",\"code\":\"Input state can be used for validation message.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9d30a86e-a1f9-463a-9c5a-76cc45dd32f1","type":"divider","props":{},"children":[]},{"id":"5f6b85dc-e319-4657-b098-4ba7817c367c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Input with Required","styles":{}}],"children":[]},{"id":"0e929d54-f10f-4a05-bd71-97cd820e2da2","type":"procode","props":{"code":"export default function ContactForm() {\n return (\n

\n \n\n \n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"hfo8nujoj\",\"name\":\"code\",\"code\":\"export default function ContactForm() {\\n return (\\n

\\n \\n\\n \\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7c1e9077-3ecc-4ad6-b8cb-036d10dbb56f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"17ecb1f2-8f9f-4aa6-a983-85f79d7d9aef","type":"procode","props":{"code":"required = browser requires this input before submit\n","language":"txt","filename":"","files":"[{\"id\":\"r0pllf0lf\",\"name\":\"code\",\"code\":\"required = browser requires this input before submit\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3c8dc2bf-9f70-4a56-b087-0af4f197d407","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Common validation attributes:","styles":{}}],"children":[]},{"id":"f9f9b560-fcbd-4c20-b3ac-55be498e5c0d","type":"procode","props":{"code":"required\nminLength\nmaxLength\nmin\nmax\npattern\n","language":"txt","filename":"","files":"[{\"id\":\"anzmvri7o\",\"name\":\"code\",\"code\":\"required\\nminLength\\nmaxLength\\nmin\\nmax\\npattern\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3d6467e2-41cc-4242-9236-69357d624346","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React input supports common browser input props such as ","styles":{}},{"type":"text","text":"required","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"minLength","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"maxLength","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"min","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"max","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"pattern","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"placeholder","styles":{"code":true}},{"type":"text","text":", ","styles":{}},{"type":"text","text":"disabled","styles":{"code":true}},{"type":"text","text":", and ","styles":{}},{"type":"text","text":"readOnly","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"c6e74cde-77a6-4cbe-9e14-41ca9f6a66c5","type":"divider","props":{},"children":[]},{"id":"6414550a-8a00-49aa-b7e7-0f2bc1854d25","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Input with Disabled","styles":{}}],"children":[]},{"id":"e5da8d0c-48d9-4250-be6c-915f38c262f5","type":"procode","props":{"code":"export default function SubmitInput() {\n const loading = true\n\n return (\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"21fnughzh\",\"name\":\"code\",\"code\":\"export default function SubmitInput() {\\n const loading = true\\n\\n return (\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c9dbe39c-aa7f-4179-b660-4df546c34952","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"98628c24-68b6-443a-a168-dabeedf74906","type":"procode","props":{"code":"disabled={true} = user cannot edit input\n","language":"txt","filename":"","files":"[{\"id\":\"vni72ojby\",\"name\":\"code\",\"code\":\"disabled={true} = user cannot edit input\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"30ab9076-482a-49f3-a52c-41b66d124292","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use for:","styles":{}}],"children":[]},{"id":"7cb038fe-e656-47ba-823b-b67aacbbce44","type":"procode","props":{"code":"Loading state\nSubmitting form\nReadonly process\nUnavailable field\n","language":"txt","filename":"","files":"[{\"id\":\"r9w89yzkg\",\"name\":\"code\",\"code\":\"Loading state\\nSubmitting form\\nReadonly process\\nUnavailable field\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a7fec571-1978-4eb6-ac6b-1878c1b853c6","type":"divider","props":{},"children":[]},{"id":"f99874e8-0857-4655-a303-dd2e3cb2a031","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Input with readOnly","styles":{}}],"children":[]},{"id":"64ddb025-86c4-4eb6-9b43-e8a4839fbcd6","type":"procode","props":{"code":"export default function ReadOnlyInput() {\n return (\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"s35j1ush2\",\"name\":\"code\",\"code\":\"export default function ReadOnlyInput() {\\n return (\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"35e3a831-92a6-458a-998c-d270a52b1b93","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"a97b9260-8882-4a7e-9774-4c465955475a","type":"procode","props":{"code":"readOnly = user can see value but cannot edit it\n","language":"txt","filename":"","files":"[{\"id\":\"67d7j8h9w\",\"name\":\"code\",\"code\":\"readOnly = user can see value but cannot edit it\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0222822e-b8ec-4072-9969-6658866e684f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use for:","styles":{}}],"children":[]},{"id":"bce44989-da20-47ce-b6ed-47daf3ee2295","type":"procode","props":{"code":"Invoice number\nGenerated slug preview\nUser ID display\nReadonly profile data\n","language":"txt","filename":"","files":"[{\"id\":\"0qalic6kn\",\"name\":\"code\",\"code\":\"Invoice number\\nGenerated slug preview\\nUser ID display\\nReadonly profile data\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"73a03b6a-34db-4f27-8695-62a99151209b","type":"divider","props":{},"children":[]},{"id":"64f2d587-f5f0-4f76-bb03-b0df28fba533","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Checkbox Input","styles":{}}],"children":[]},{"id":"fe42b69e-389e-47a6-922a-8ac084a859d4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Checkbox uses ","styles":{}},{"type":"text","text":"checked","styles":{"code":true}},{"type":"text","text":", not ","styles":{}},{"type":"text","text":"value","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"aba2c707-61d3-484d-b61c-d8ecb84c5924","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function CheckboxInput() {\n const [accepted, setAccepted] = useState(false)\n\n return (\n \n setAccepted(event.target.checked)}\n />\n Accept terms\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"xq2n0h3v2\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function CheckboxInput() {\\n const [accepted, setAccepted] = useState(false)\\n\\n return (\\n \\n setAccepted(event.target.checked)}\\n />\\n Accept terms\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a5154d0f-f696-4e57-8934-d257f9c8c727","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"4d854726-06da-4858-939f-6e287ecabe52","type":"procode","props":{"code":"Checkbox uses checked.\nText input uses value.\n","language":"txt","filename":"","files":"[{\"id\":\"crtq0z2tz\",\"name\":\"code\",\"code\":\"Checkbox uses checked.\\nText input uses value.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"03dea961-a134-4ecb-a08f-c5c9b6238fc0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React docs specifically note that checkboxes need ","styles":{}},{"type":"text","text":"checked","styles":{"code":true}},{"type":"text","text":" or ","styles":{}},{"type":"text","text":"defaultChecked","styles":{"code":true}},{"type":"text","text":", not ","styles":{}},{"type":"text","text":"value","styles":{"code":true}},{"type":"text","text":" or ","styles":{}},{"type":"text","text":"defaultValue","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"537534da-8f50-4c7f-b0f8-bcf166c408d3","type":"divider","props":{},"children":[]},{"id":"46041161-a85d-47fc-935f-edb42bdb0568","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Radio Input","styles":{}}],"children":[]},{"id":"b1d66044-3db8-4279-ade2-08c81b282be7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Radio inputs are used to choose one option from a group.","styles":{}}],"children":[]},{"id":"41366589-efab-4729-b478-8fe0e8f1c62f","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function RoleInput() {\n const [role, setRole] = useState(\"user\")\n\n return (\n

\n \n setRole(event.target.value)}\n />\n User\n \n\n \n setRole(event.target.value)}\n />\n Admin\n \n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"hq19fd9ff\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function RoleInput() {\\n const [role, setRole] = useState(\\\"user\\\")\\n\\n return (\\n

\\n \\n setRole(event.target.value)}\\n />\\n User\\n \\n\\n \\n setRole(event.target.value)}\\n />\\n Admin\\n \\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d7431cdc-7756-4497-9a91-d303e3391b52","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"7f4bf3b7-fc50-47f6-bd8e-9e8e237557a5","type":"procode","props":{"code":"Same name = same radio group\nchecked = selected option\n","language":"txt","filename":"","files":"[{\"id\":\"nug7psdws\",\"name\":\"code\",\"code\":\"Same name = same radio group\\nchecked = selected option\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dfe3115b-ec2c-43da-9252-c143d13f17aa","type":"divider","props":{},"children":[]},{"id":"9e9b8ef5-c434-4fe4-b7d7-b4fa2a95b4ea","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"File Input","styles":{}}],"children":[]},{"id":"459f14d5-7892-4012-b196-4762501906f4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"File input is usually uncontrolled.","styles":{}}],"children":[]},{"id":"d990bf94-79d5-48d8-9e61-09e3e859832f","type":"procode","props":{"code":"export default function FileInput() {\n function handleChange(event: React.ChangeEvent) {\n const file = event.target.files?.[0]\n\n if (!file) {\n return\n }\n\n console.log(file.name)\n }\n\n return (\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"scywpc0jn\",\"name\":\"code\",\"code\":\"export default function FileInput() {\\n function handleChange(event: React.ChangeEvent) {\\n const file = event.target.files?.[0]\\n\\n if (!file) {\\n return\\n }\\n\\n console.log(file.name)\\n }\\n\\n return (\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"16879532-3fdd-4dbf-b255-696719a78366","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"7c38aa15-230f-459b-aade-b0421c45fd15","type":"procode","props":{"code":"File input reads files from event.target.files\n","language":"txt","filename":"","files":"[{\"id\":\"3hdvb4iar\",\"name\":\"code\",\"code\":\"File input reads files from event.target.files\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"72198068-3dca-439e-8ecd-d1d9bbc1234a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Common props:","styles":{}}],"children":[]},{"id":"1320174c-2f32-4f4e-8562-dea05c905ae2","type":"procode","props":{"code":"accept=\"image/*\"\nmultiple\n","language":"txt","filename":"","files":"[{\"id\":\"u64mqb0fi\",\"name\":\"code\",\"code\":\"accept=\\\"image/*\\\"\\nmultiple\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1aafe0c3-5341-4d09-b294-341451ae5c8c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React input docs list ","styles":{}},{"type":"text","text":"accept","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"multiple","styles":{"code":true}},{"type":"text","text":" as relevant props for file inputs.","styles":{}}],"children":[]},{"id":"fca8c3c2-be88-4373-a605-86a1854f5ebc","type":"divider","props":{},"children":[]},{"id":"c7dd1374-9eec-4040-81da-5d7d88c32a07","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Input Component Pattern","styles":{}}],"children":[]},{"id":"0345e1eb-8a3a-4833-8057-d76fc5a43f0b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Create reusable input component.","styles":{}}],"children":[]},{"id":"c007ce52-ed22-4ecc-8c30-ada94ab9365c","type":"procode","props":{"code":"type TextInputProps = {\n label: string\n name: string\n value: string\n placeholder?: string\n type?: \"text\" | \"email\" | \"password\" | \"search\"\n onChange: (event: React.ChangeEvent) => void\n}\n\nexport function TextInput({\n label,\n name,\n value,\n placeholder,\n type = \"text\",\n onChange,\n}: TextInputProps) {\n return (\n

\n {label}\n\n \n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"w1pvzoggr\",\"name\":\"code\",\"code\":\"type TextInputProps = {\\n label: string\\n name: string\\n value: string\\n placeholder?: string\\n type?: \\\"text\\\" | \\\"email\\\" | \\\"password\\\" | \\\"search\\\"\\n onChange: (event: React.ChangeEvent) => void\\n}\\n\\nexport function TextInput({\\n label,\\n name,\\n value,\\n placeholder,\\n type = \\\"text\\\",\\n onChange,\\n}: TextInputProps) {\\n return (\\n

\\n {label}\\n\\n \\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a29dc385-8680-4d9e-b342-63a7db66ecb0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Usage:","styles":{}}],"children":[]},{"id":"ced88745-2231-4877-a331-dd00dc7344f5","type":"procode","props":{"code":"import { useState } from \"react\"\nimport { TextInput } from \"./TextInput\"\n\nexport default function LoginForm() {\n const [email, setEmail] = useState(\"\")\n\n return (\n setEmail(event.target.value)}\n placeholder=\"you@example.com\"\n />\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"dxvonh0gq\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\nimport { TextInput } from \\\"./TextInput\\\"\\n\\nexport default function LoginForm() {\\n const [email, setEmail] = useState(\\\"\\\")\\n\\n return (\\n setEmail(event.target.value)}\\n placeholder=\\\"you@example.com\\\"\\n />\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5d7ab06a-ae8c-48a8-89fe-52345310dc1c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"2da760d6-03e4-40f5-b28f-e02558ca2271","type":"procode","props":{"code":"Reusable Input component = less repeated form code\n","language":"txt","filename":"","files":"[{\"id\":\"5z7owmnp5\",\"name\":\"code\",\"code\":\"Reusable Input component = less repeated form code\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4434a124-60cf-43e3-9e68-8073f6866129","type":"divider","props":{},"children":[]},{"id":"228f5efa-e87c-4aa8-8752-3ca28aa7c6ed","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Input with Error Message","styles":{}}],"children":[]},{"id":"2fb3dc9f-5b66-4834-883d-3d54c12a158d","type":"procode","props":{"code":"type TextInputProps = {\n label: string\n name: string\n value: string\n error?: string\n onChange: (event: React.ChangeEvent) => void\n}\n\nexport function TextInput({\n label,\n name,\n value,\n error,\n onChange,\n}: TextInputProps) {\n return (\n

\n {label}\n\n \n\n {error && (\n

\n {error}\n

\n )}\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"1dhlp071x\",\"name\":\"code\",\"code\":\"type TextInputProps = {\\n label: string\\n name: string\\n value: string\\n error?: string\\n onChange: (event: React.ChangeEvent) => void\\n}\\n\\nexport function TextInput({\\n label,\\n name,\\n value,\\n error,\\n onChange,\\n}: TextInputProps) {\\n return (\\n

\\n {label}\\n\\n \\n\\n {error && (\\n

\\n {error}\\n

\\n )}\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"509c3fbc-b48d-40c1-b5de-8b39eb694cb3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"603dd9c5-6a11-4246-8be7-94d9d0c8f86e","type":"procode","props":{"code":"Input + error message = better form UX\n","language":"txt","filename":"","files":"[{\"id\":\"psfzjv2z7\",\"name\":\"code\",\"code\":\"Input + error message = better form UX\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"07e59a26-6fa1-4934-adc7-a0062e6f4302","type":"divider","props":{},"children":[]},{"id":"dc0df4a1-3320-4b6f-8294-cc3e012222e4","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Input with Tailwind CSS","styles":{}}],"children":[]},{"id":"2de80836-e313-4306-a722-307f4499d3cd","type":"procode","props":{"code":"type TextInputProps = {\n label: string\n name: string\n value: string\n error?: string\n type?: string\n placeholder?: string\n onChange: (event: React.ChangeEvent) => void\n}\n\nexport function TextInput({\n label,\n name,\n value,\n error,\n type = \"text\",\n placeholder,\n onChange,\n}: TextInputProps) {\n return (\n

\n \n {label}\n \n\n \n\n {error && (\n

\n {error}\n

\n )}\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"tprxocpt3\",\"name\":\"code\",\"code\":\"type TextInputProps = {\\n label: string\\n name: string\\n value: string\\n error?: string\\n type?: string\\n placeholder?: string\\n onChange: (event: React.ChangeEvent) => void\\n}\\n\\nexport function TextInput({\\n label,\\n name,\\n value,\\n error,\\n type = \\\"text\\\",\\n placeholder,\\n onChange,\\n}: TextInputProps) {\\n return (\\n

\\n \\n {label}\\n \\n\\n \\n\\n {error && (\\n

\\n {error}\\n

\\n )}\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4bbc7ca5-da8a-4f52-a3bc-79bcee2acd75","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"47cda9e6-9e16-4398-8f8e-64557b836b83","type":"procode","props":{"code":"Tailwind makes input styling readable inside className.\n","language":"txt","filename":"","files":"[{\"id\":\"ejyk4d254\",\"name\":\"code\",\"code\":\"Tailwind makes input styling readable inside className.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"85bece22-cc1d-4fb4-b918-569b85ce8238","type":"divider","props":{},"children":[]},{"id":"56bd0410-a5d2-44a0-92b7-fedebb89814b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Input with Form State Object","styles":{}}],"children":[]},{"id":"55c4f441-107c-466e-bb50-451b0389492c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For multiple input fields, you can use one object state.","styles":{}}],"children":[]},{"id":"239680f1-bc42-4b5c-9f28-68894f7958d6","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function RegisterForm() {\n const [form, setForm] = useState({\n name: \"\",\n email: \"\",\n password: \"\",\n })\n\n function handleChange(event: React.ChangeEvent) {\n const { name, value } = event.target\n\n setForm((current) => ({\n ...current,\n [name]: value,\n }))\n }\n\n return (\n

\n \n\n \n\n \n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"w1irspyqc\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function RegisterForm() {\\n const [form, setForm] = useState({\\n name: \\\"\\\",\\n email: \\\"\\\",\\n password: \\\"\\\",\\n })\\n\\n function handleChange(event: React.ChangeEvent) {\\n const { name, value } = event.target\\n\\n setForm((current) => ({\\n ...current,\\n [name]: value,\\n }))\\n }\\n\\n return (\\n

\\n \\n\\n \\n\\n \\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"93988c2e-f9d9-40b1-9557-65f8fda7067f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"190320f0-af96-486f-a2b6-c20b8c3604f1","type":"procode","props":{"code":"name attribute decides which state field updates.\n","language":"txt","filename":"","files":"[{\"id\":\"2w9e4rcsc\",\"name\":\"code\",\"code\":\"name attribute decides which state field updates.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"939a66b0-f32c-41d3-bfc9-23dc087551f3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Flow:","styles":{}}],"children":[]},{"id":"bb7c2d84-0939-4c40-8602-7331f8e3f3ae","type":"procode","props":{"code":"Input name=\"email\"\n├── event.target.name = email\n├── event.target.value = typed value\n└── form.email updates\n","language":"txt","filename":"","files":"[{\"id\":\"xc7zghcru\",\"name\":\"code\",\"code\":\"Input name=\\\"email\\\"\\n├── event.target.name = email\\n├── event.target.value = typed value\\n└── form.email updates\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7e87ed2c-24ef-4734-8721-d07ed61e97bd","type":"divider","props":{},"children":[]},{"id":"ca4ccf48-d59d-4efe-8c2c-60ac6d5c075f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Common Mistakes","styles":{}}],"children":[]},{"id":"e6cdd353-df88-4820-b19c-79051778b5b8","type":"procode","props":{"code":"Mistake 1: Using value without onChange\nMistake 2: Using checked wrong for checkbox\nMistake 3: Using value for checkbox boolean\nMistake 4: Switching between controlled and uncontrolled input\nMistake 5: Forgetting label\nMistake 6: Forgetting name when using FormData\nMistake 7: Treating number input value as number automatically\nMistake 8: Putting too much validation logic inside JSX\nMistake 9: Not showing error message\nMistake 10: Not disabling input during submit when needed\n","language":"txt","filename":"","files":"[{\"id\":\"fatof7kto\",\"name\":\"code\",\"code\":\"Mistake 1: Using value without onChange\\nMistake 2: Using checked wrong for checkbox\\nMistake 3: Using value for checkbox boolean\\nMistake 4: Switching between controlled and uncontrolled input\\nMistake 5: Forgetting label\\nMistake 6: Forgetting name when using FormData\\nMistake 7: Treating number input value as number automatically\\nMistake 8: Putting too much validation logic inside JSX\\nMistake 9: Not showing error message\\nMistake 10: Not disabling input during submit when needed\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"833143af-bb50-4a53-a19a-bc22c0237de2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Examples:","styles":{}}],"children":[]},{"id":"2db3ae64-1efe-4ffe-8a4c-a2f2f53006ec","type":"procode","props":{"code":"// Wrong: controlled input without onChange\n\n","language":"tsx","filename":"","files":"[{\"id\":\"298rf29jh\",\"name\":\"code\",\"code\":\"// Wrong: controlled input without onChange\\n\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dab3266a-e2e7-4487-83f6-ca68300b1d48","type":"procode","props":{"code":"// Correct\n setName(event.target.value)}\n/>\n","language":"tsx","filename":"","files":"[{\"id\":\"6wecpeinn\",\"name\":\"code\",\"code\":\"// Correct\\n setName(event.target.value)}\\n/>\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fb3867a7-4513-4be5-952d-1e6a3e64c401","type":"procode","props":{"code":"// Wrong for checkbox\n\n","language":"tsx","filename":"","files":"[{\"id\":\"9p8uh2kuu\",\"name\":\"code\",\"code\":\"// Wrong for checkbox\\n\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1d2f9eb4-0b43-407d-8d8d-860909f9fe34","type":"procode","props":{"code":"// Correct for checkbox\n setAccepted(event.target.checked)}\n/>\n","language":"tsx","filename":"","files":"[{\"id\":\"t55obyxca\",\"name\":\"code\",\"code\":\"// Correct for checkbox\\n setAccepted(event.target.checked)}\\n/>\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3e1fca33-2869-4f7d-9e09-7e79e0db6aec","type":"divider","props":{},"children":[]},{"id":"580620ef-493c-46a5-b9ea-6dea1b6c8765","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Professional Pattern","styles":{}}],"children":[]},{"id":"10ec81d6-b79e-42ab-af02-8a323361a236","type":"procode","props":{"code":"Professional Input Field Pattern\n├── Use label for accessibility\n├── Use controlled input for dynamic forms\n├── Use value and onChange together\n├── Use checked for checkbox and radio\n├── Use defaultValue for uncontrolled initial value\n├── Use name when submitting form data\n├── Use TypeScript event types\n├── Keep validation readable\n├── Show error message near input\n├── Use disabled while submitting\n├── Use reusable Input component\n└── Avoid switching controlled and uncontrolled modes\n","language":"txt","filename":"","files":"[{\"id\":\"u9gxfc4lc\",\"name\":\"code\",\"code\":\"Professional Input Field Pattern\\n├── Use label for accessibility\\n├── Use controlled input for dynamic forms\\n├── Use value and onChange together\\n├── Use checked for checkbox and radio\\n├── Use defaultValue for uncontrolled initial value\\n├── Use name when submitting form data\\n├── Use TypeScript event types\\n├── Keep validation readable\\n├── Show error message near input\\n├── Use disabled while submitting\\n├── Use reusable Input component\\n└── Avoid switching controlled and uncontrolled modes\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ebcea16f-1c2e-44b7-afa7-43e843c21e2a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Good pattern:","styles":{}}],"children":[]},{"id":"ce19ac5a-3cdf-48f9-b443-ecee5e8264ef","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function LoginForm() {\n const [email, setEmail] = useState(\"\")\n const [error, setError] = useState(\"\")\n\n function handleSubmit(event: React.FormEvent) {\n event.preventDefault()\n\n if (!email) {\n setError(\"Email is required\")\n return\n }\n\n setError(\"\")\n console.log(\"Submit:\", email)\n }\n\n return (\n

\n Email\n\n setEmail(event.target.value)}\n placeholder=\"you@example.com\"\n aria-invalid={Boolean(error)}\n aria-describedby={error ? \"email-error\" : undefined}\n />\n\n {error && (\n

\n {error}\n

\n )}\n\n \n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"tv4g6x1nn\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function LoginForm() {\\n const [email, setEmail] = useState(\\\"\\\")\\n const [error, setError] = useState(\\\"\\\")\\n\\n function handleSubmit(event: React.FormEvent) {\\n event.preventDefault()\\n\\n if (!email) {\\n setError(\\\"Email is required\\\")\\n return\\n }\\n\\n setError(\\\"\\\")\\n console.log(\\\"Submit:\\\", email)\\n }\\n\\n return (\\n

\\n Email\\n\\n setEmail(event.target.value)}\\n placeholder=\\\"you@example.com\\\"\\n aria-invalid={Boolean(error)}\\n aria-describedby={error ? \\\"email-error\\\" : undefined}\\n />\\n\\n {error && (\\n

\\n {error}\\n

\\n )}\\n\\n \\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"393e7360-810e-4a2f-adc3-8ffe9658a885","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"c003c2e7-123c-47b1-83ad-8d8e63db4aa1","type":"procode","props":{"code":"Input field should be clear, controlled, accessible, and validated.\n","language":"txt","filename":"","files":"[{\"id\":\"3je8c7nsy\",\"name\":\"code\",\"code\":\"Input field should be clear, controlled, accessible, and validated.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"025f3c00-721f-47e6-bd79-c7b713bcfb2b","type":"divider","props":{},"children":[]},{"id":"f7188949-a7d8-44fb-aa33-1a9dc5f5cad6","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Mental Model","styles":{}}],"children":[]},{"id":"ae058608-1dbc-4d66-a512-f6195c652ad8","type":"procode","props":{"code":"Input Field = user data entry\n","language":"txt","filename":"","files":"[{\"id\":\"9v98w0u5c\",\"name\":\"code\",\"code\":\"Input Field = user data entry\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"669004e2-5ba1-4a25-8f1f-3984ab223d10","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Controlled input mental model:","styles":{}}],"children":[]},{"id":"6f3a1327-39e7-43c7-a284-5509aed3b97e","type":"procode","props":{"code":"State\n└── value prop\n └── input displays value\n └── user types\n └── onChange updates state\n","language":"txt","filename":"","files":"[{\"id\":\"t1v9ra6cz\",\"name\":\"code\",\"code\":\"State\\n└── value prop\\n └── input displays value\\n └── user types\\n └── onChange updates state\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c4da1a53-a389-40ce-bb8f-2d3f270af1b7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Another simple version:","styles":{}}],"children":[]},{"id":"2cd58c4c-0003-447c-b145-37d2ecbfdd82","type":"procode","props":{"code":"Text input\n├── value\n└── onChange with event.target.value\n\nCheckbox input\n├── checked\n└── onChange with event.target.checked\n","language":"txt","filename":"","files":"[{\"id\":\"y83hrvxk9\",\"name\":\"code\",\"code\":\"Text input\\n├── value\\n└── onChange with event.target.value\\n\\nCheckbox input\\n├── checked\\n└── onChange with event.target.checked\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e784949a-baf5-47d9-8c66-ee0ed0148c9d","type":"divider","props":{},"children":[]},{"id":"8e7bd6d2-fde6-4c37-a724-68ae87f7c024","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Summary","styles":{}}],"children":[]},{"id":"525775d2-c742-4b80-9724-04553fb1deb8","type":"procode","props":{"code":"Input Field\n├── Lets user enter data\n├── Uses the browser input element\n├── Commonly uses type text, email, password, number, search, checkbox, radio, file, and date\n├── Can be controlled with React state\n├── Controlled text input uses value and onChange\n├── Checkbox uses checked and onChange\n├── defaultValue is for uncontrolled initial value\n├── name is important for form submission\n├── label is important for accessibility\n├── TypeScript uses React.ChangeEvent\n├── Validation can show error messages\n├── Reusable Input components reduce repeated code\n└── Good input handling makes forms easier to maintain\n","language":"txt","filename":"","files":"[{\"id\":\"2opuepm7l\",\"name\":\"code\",\"code\":\"Input Field\\n├── Lets user enter data\\n├── Uses the browser input element\\n├── Commonly uses type text, email, password, number, search, checkbox, radio, file, and date\\n├── Can be controlled with React state\\n├── Controlled text input uses value and onChange\\n├── Checkbox uses checked and onChange\\n├── defaultValue is for uncontrolled initial value\\n├── name is important for form submission\\n├── label is important for accessibility\\n├── TypeScript uses React.ChangeEvent\\n├── Validation can show error messages\\n├── Reusable Input components reduce repeated code\\n└── Good input handling makes forms easier to maintain\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e14c255b-ec1c-4fb5-ae0b-97cb67bd76ab","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Input Field is important because most React applications need forms. Login pages, register pages, search boxes, dashboards, CRUD apps, and profile settings all use input fields to collect user data.","styles":{}}],"children":[]},{"id":"38f96d18-6147-4d3c-8d0f-6b1083495d00","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]