{"id":15480,"date":"2017-04-17T08:00:45","date_gmt":"2017-04-17T15:00:45","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=15480"},"modified":"2020-10-13T00:27:29","modified_gmt":"2020-10-13T07:27:29","slug":"make-custom-radio-buttons-uxpin","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/make-custom-radio-buttons-uxpin\/","title":{"rendered":"Don\u2019t Settle for Default Radio Buttons \u2014\u00a0Make \u2019em Your Own"},"content":{"rendered":"<p>Not all assets are created equally.<\/p>\n<p>Every design system has its own style, whether it\u2019s based on an existing framework or completely home-brewed. For example, some systems for websites and apps rely on plain HTML elements and let the browser display whatever they\u2019re programmed to display. But they don\u2019t have to.<\/p>\n<p>Take radio buttons. Radio buttons let people select one option from a series. They\u2019re long-standing HTML elements that every major browser renders with ease. But certain looks, like <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/web-design-trends-2017-year-material-design-lite\/\">Google Material Design Lite<\/a>, don\u2019t follow browsers\u2019 built-in radio button styles.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Colorful-radio-buttons.gif\" alt=\"Colorful radio buttons demo\" width=\"170\" height=\"136\" class=\"alignnone size-full wp-image-15481\" \/><\/p>\n<p>If you want to stylize your forms, here\u2019s how to make your own radio buttons.<\/p>\n<h2>1. Find radio elements<\/h2>\n<p>Aside from the traditional ones, many graphic radio buttons exist. Look no further than Google\u2019s own set \u2014 of which you can <a href=\"https:\/\/www.uxpin.com\/studio\/user-guide\/working-with-elements\/#search\">find<\/a> as simulated, colorable vectors in UXPin. Create one in your tool of choice and copy it for each option you want to give users.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Create-three-\u201coff\u201d-buttons-v3.gif\" alt=\"Create three \u201coff\u201d\u00a0buttons\" width=\"700\" height=\"351\" class=\"alignnone size-full wp-image-15482\" \/><\/p>\n<p>Color them to suit your needs (although for demo purposes we\u2019ll stick with black). Then repeat the process with three \u201con\u201d buttons, placing them on top of the \u201coff\u201d buttons.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Add-on-radio-buttons-v3.gif\" alt=\"Add \u201con\u201d radio buttons\" width=\"700\" height=\"350\" class=\"alignnone size-full wp-image-15483\" \/><\/p>\n<h2>2. Create states<\/h2>\n<p>Each radio button has two settings: on and off.<\/p>\n<p>In UXPin, select all pairs of radio buttons and give them two more states, turning them into a <a href=\"https:\/\/www.uxpin.com\/studio\/user-guide\/multistate-elements\/\">multistate element (MSE)<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Create-a-MSE-v3.gif\" alt=\"Create a multistate element\" width=\"700\" height=\"351\" class=\"alignnone size-full wp-image-15484\" \/><\/p>\n<p>This turns the six radio buttons into one \u201celement\u201d with three views, one for each active button. But you need to edit each state to reflect that. To do so, go through each state and hide the appropriate radio buttons using the left-land layers menu.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Turn-off-on-buttons-v3.gif\" alt=\"Turn off radio buttons\" width=\"700\" height=\"351\" class=\"alignnone size-full wp-image-15485\" \/><\/p>\n<h2>3. Add interactive hotspots<\/h2>\n<p>Hotspots are invisible layers that act as triggers for interactions. Since the entire set of radio buttons is effectively one design \u201celement,\u201d put a hotspot over each radio button and its label. Then add an interaction to each: on click, set state of \u201cMultistate 1\u201d to state 1, 2, or 3, depending on to which hotspot you\u2019re adding the interaction.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Add-hotspots-v3.gif\" alt=\"Add hotspots\" width=\"700\" height=\"350\" class=\"alignnone size-full wp-image-15486\" \/><\/p>\n<p>The result: a set of radio buttons that fit into your customized design system better than plain ol\u2019 HTML-based elements.<\/p>\n<p>Every design system has its own style, whether it\u2019s based on an existing framework or your own design. Some systems for websites and apps rely on plain HTML elements and let the browser display whatever they\u2019re programmed to display. Others, like the custom set you\u2019ve seen here, enhance your design system with its own aesthetic.<\/p>\n<section class=\"uxpin-trial-widget\"><h2>Join the world's best designers who&nbsp;use UXPin.<\/h2><span class=\"white-info\">Sign up for a free trial.<\/span><a href=\"https:\/\/www.uxpin.com\/sign-up\" class=\"btn btn-flat sign-up-btn white\">Try it for free!<\/a><\/section>\n","protected":false},"excerpt":{"rendered":"<p>Not all radio buttons are created equally. Some have custom looks and styles. Here\u2019s one approach to creating your own radio buttons in UXPin.<\/p>\n","protected":false},"author":27,"featured_media":15487,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,199,18,11,19],"tags":[],"class_list":["post-15480","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-design-systems","category-process","category-tutorials","category-uxpin"],"yoast_title":"","yoast_metadesc":"Not all radio buttons are created equally. Some have custom looks and styles. Here\u2019s one approach to creating your own radio buttons in UXPin.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Don\u2019t Settle for Default Radio Buttons \u2014\u00a0Make \u2019em Your Own | UXPin<\/title>\n<meta name=\"description\" content=\"Not all radio buttons are created equally. Some have custom looks and styles. Here\u2019s one approach to creating your own radio buttons in UXPin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/make-custom-radio-buttons-uxpin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Don\u2019t Settle for Default Radio Buttons \u2014\u00a0Make \u2019em Your Own\" \/>\n<meta property=\"og:description\" content=\"Not all radio buttons are created equally. Some have custom looks and styles. Here\u2019s one approach to creating your own radio buttons in UXPin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/make-custom-radio-buttons-uxpin\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-17T15:00:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-13T07:27:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Radio-button-teaser.png\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ben Gremillion\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@benthinkin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ben Gremillion\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/make-custom-radio-buttons-uxpin\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/make-custom-radio-buttons-uxpin\\\/\"},\"author\":{\"name\":\"Ben Gremillion\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"headline\":\"Don\u2019t Settle for Default Radio Buttons \u2014\u00a0Make \u2019em Your Own\",\"datePublished\":\"2017-04-17T15:00:45+00:00\",\"dateModified\":\"2020-10-13T07:27:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/make-custom-radio-buttons-uxpin\\\/\"},\"wordCount\":420,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/make-custom-radio-buttons-uxpin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/Radio-button-teaser.png\",\"articleSection\":[\"Blog\",\"Design Systems\",\"Process\",\"Tutorials\",\"UXPin\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/make-custom-radio-buttons-uxpin\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/make-custom-radio-buttons-uxpin\\\/\",\"name\":\"Don\u2019t Settle for Default Radio Buttons \u2014\u00a0Make \u2019em Your Own | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/make-custom-radio-buttons-uxpin\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/make-custom-radio-buttons-uxpin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/Radio-button-teaser.png\",\"datePublished\":\"2017-04-17T15:00:45+00:00\",\"dateModified\":\"2020-10-13T07:27:29+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"description\":\"Not all radio buttons are created equally. Some have custom looks and styles. Here\u2019s one approach to creating your own radio buttons in UXPin.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/make-custom-radio-buttons-uxpin\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/make-custom-radio-buttons-uxpin\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/make-custom-radio-buttons-uxpin\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/Radio-button-teaser.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/Radio-button-teaser.png\",\"width\":720,\"height\":200,\"caption\":\"Radio button teaser\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/make-custom-radio-buttons-uxpin\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Don\u2019t Settle for Default Radio Buttons \u2014\u00a0Make \u2019em Your Own\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\",\"name\":\"Ben Gremillion\",\"description\":\"Ben Gremillion is a Content Strategist at UXPin. He\u2019s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.\",\"sameAs\":[\"https:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/benthinkin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/bengremillion\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Don\u2019t Settle for Default Radio Buttons \u2014\u00a0Make \u2019em Your Own | UXPin","description":"Not all radio buttons are created equally. Some have custom looks and styles. Here\u2019s one approach to creating your own radio buttons in UXPin.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/make-custom-radio-buttons-uxpin\/","og_locale":"en_US","og_type":"article","og_title":"Don\u2019t Settle for Default Radio Buttons \u2014\u00a0Make \u2019em Your Own","og_description":"Not all radio buttons are created equally. Some have custom looks and styles. Here\u2019s one approach to creating your own radio buttons in UXPin.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/make-custom-radio-buttons-uxpin\/","og_site_name":"Studio by UXPin","article_published_time":"2017-04-17T15:00:45+00:00","article_modified_time":"2020-10-13T07:27:29+00:00","og_image":[{"width":720,"height":200,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Radio-button-teaser.png","type":"image\/png"}],"author":"Ben Gremillion","twitter_card":"summary_large_image","twitter_creator":"@benthinkin","twitter_misc":{"Written by":"Ben Gremillion","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/make-custom-radio-buttons-uxpin\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/make-custom-radio-buttons-uxpin\/"},"author":{"name":"Ben Gremillion","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"headline":"Don\u2019t Settle for Default Radio Buttons \u2014\u00a0Make \u2019em Your Own","datePublished":"2017-04-17T15:00:45+00:00","dateModified":"2020-10-13T07:27:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/make-custom-radio-buttons-uxpin\/"},"wordCount":420,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/make-custom-radio-buttons-uxpin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Radio-button-teaser.png","articleSection":["Blog","Design Systems","Process","Tutorials","UXPin"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/make-custom-radio-buttons-uxpin\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/make-custom-radio-buttons-uxpin\/","name":"Don\u2019t Settle for Default Radio Buttons \u2014\u00a0Make \u2019em Your Own | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/make-custom-radio-buttons-uxpin\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/make-custom-radio-buttons-uxpin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Radio-button-teaser.png","datePublished":"2017-04-17T15:00:45+00:00","dateModified":"2020-10-13T07:27:29+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"description":"Not all radio buttons are created equally. Some have custom looks and styles. Here\u2019s one approach to creating your own radio buttons in UXPin.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/make-custom-radio-buttons-uxpin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/make-custom-radio-buttons-uxpin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/make-custom-radio-buttons-uxpin\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Radio-button-teaser.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Radio-button-teaser.png","width":720,"height":200,"caption":"Radio button teaser"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/make-custom-radio-buttons-uxpin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Don\u2019t Settle for Default Radio Buttons \u2014\u00a0Make \u2019em Your Own"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f","name":"Ben Gremillion","description":"Ben Gremillion is a Content Strategist at UXPin. He\u2019s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.","sameAs":["https:\/\/www.uxpin.com","https:\/\/x.com\/benthinkin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/bengremillion\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=15480"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15480\/revisions"}],"predecessor-version":[{"id":22879,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15480\/revisions\/22879"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/15487"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=15480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=15480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=15480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}