{"id":9457,"date":"2026-04-22T17:10:56","date_gmt":"2026-04-22T22:10:56","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=9457"},"modified":"2026-04-22T17:11:24","modified_gmt":"2026-04-22T22:11:24","slug":"the-incredible-overcomplexity-of-the-shadcn-radio-button","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/the-incredible-overcomplexity-of-the-shadcn-radio-button\/","title":{"rendered":"The Incredible Overcomplexity of the Shadcn Radio Button"},"content":{"rendered":"\n<p>A radio button is this:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"radio\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"foo\"<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><a href=\"https:\/\/paulmakeswebsites.com\/writing\/shadcn-radio-button\/\">Paul Hebert took at fair look<\/a> at how Shadcn turns that into 45 lines of code and three imports, which in turn uses Radix which is 215 lines of code and 7 more imports. But do you get better accessibility? No, it&#8217;s arguably worse. But do you get ease of styling? Also no. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>A radio button is this: Paul Hebert took at fair look at how Shadcn turns that into 45 lines of code and three imports, which in turn uses Radix which is 215 lines of code and 7 more imports. But do you get better accessibility? No, it&#8217;s arguably worse. But do you get ease of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9458,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[29],"tags":[7,3,474,62,99],"class_list":["post-9457","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-css","tag-javascript","tag-radix","tag-react","tag-shadcn"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2026\/04\/pexels-photo-17872347.jpeg?fit=1880%2C1253&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/9457","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=9457"}],"version-history":[{"count":2,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/9457\/revisions"}],"predecessor-version":[{"id":9460,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/9457\/revisions\/9460"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/9458"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=9457"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=9457"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=9457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}