Back

Radio 

  1 
  2<div class="radio-input">
  3  <label>
  4    <input
  5      value="value-1"
  6      checked=""
  7      name="value-radio"
  8      id="value-1"
  9      type="radio"
 10    />
 11    <svg
 12      xmlns="http://www.w3.org/2000/svg"
 13      preserveAspectRatio="xMidYMid"
 14      viewBox="0 0 256 256"
 15    >
 16      <defs>
 17        <linearGradient x1="37%" y1="51%" x2="178.1%" y2="41.9%" id="a">
 18          <stop stop-color="#FC801D" offset="9%"></stop>
 19          <stop stop-color="#B07F61" offset="23%"></stop>
 20          <stop stop-color="#577DB3" offset="41%"></stop>
 21          <stop stop-color="#1E7CE6" offset="53%"></stop>
 22          <stop stop-color="#087CFA" offset="59%"></stop>
 23        </linearGradient>
 24        <linearGradient x1="73.6%" y1="114.8%" x2="35.6%" y2="1.1%" id="b">
 25          <stop stop-color="#FE2857" offset="0%"></stop>
 26          <stop stop-color="#CB3979" offset="8%"></stop>
 27          <stop stop-color="#9E4997" offset="16%"></stop>
 28          <stop stop-color="#7557B2" offset="25%"></stop>
 29          <stop stop-color="#5362C8" offset="34%"></stop>
 30          <stop stop-color="#386CDA" offset="44%"></stop>
 31          <stop stop-color="#2373E8" offset="54%"></stop>
 32          <stop stop-color="#1478F2" offset="66%"></stop>
 33          <stop stop-color="#0B7BF8" offset="79%"></stop>
 34          <stop stop-color="#087CFA" offset="100%"></stop>
 35        </linearGradient>
 36        <linearGradient x1="28.6%" y1="23.6%" x2="81.8%" y2="129.8%" id="c">
 37          <stop stop-color="#FE2857" offset="0%"></stop>
 38          <stop stop-color="#FE295F" offset="8%"></stop>
 39          <stop stop-color="#FF2D76" offset="21%"></stop>
 40          <stop stop-color="#FF318C" offset="30%"></stop>
 41          <stop stop-color="#EA3896" offset="38%"></stop>
 42          <stop stop-color="#B248AE" offset="55%"></stop>
 43          <stop stop-color="#5A63D6" offset="79%"></stop>
 44          <stop stop-color="#087CFA" offset="100%"></stop>
 45        </linearGradient>
 46      </defs>
 47      <path fill="url(#a)" d="M40.5 180.6 2.9 150.8l22.1-41 33.3 11.1z"></path>
 48      <path fill="#087CFA" d="m256 68.2-4.6 148.3-98.6 39.5-53.7-34.7z"></path>
 49      <path fill="url(#b)" d="m256 68.2-48.8 47.6L144.5 39l31-34.8z"></path>
 50      <path
 51        fill="url(#c)"
 52        d="m99.1 221.3-78.5 28.4 16.5-57.5 21.2-71.3L0 101.4 37.1 0l83.8 9.9 86.3 105.9z"
 53      ></path>
 54      <path d="M49.1 48h160v160h-160z"></path>
 55      <path
 56        d="M69 177.8h60v10H69v-10ZM99 79V68H69.2v11h8.4v37.7h-8.4v11H99v-11h-8.3V79H99Zm28.5 49.4.2.1c-4.1.2-8.1-.8-11.8-2.6a27 27 0 0 1-7.7-6.3l8.2-9.2c1.5 1.7 3.2 3.1 5.2 4.3 1.7 1.1 3.7 1.7 5.7 1.6 2.2.2 4.3-.7 5.8-2.3a11 11 0 0 0 2.2-7.5V68h13.3v39a27 27 0 0 1-1.5 9.4c-1.7 5-5.7 9-10.8 10.6-2.8 1-5.8 1.5-8.8 1.4Z"
 57        fill="#FFF"
 58      ></path>
 59    </svg>
 60 
 61    <span>IntelliJ IDE</span>
 62  </label>
 63  <label>
 64    <input value="value-2" name="value-radio" id="value-2" type="radio" />
 65    <svg
 66      viewBox="0 0 256 254"
 67      xmlns="http://www.w3.org/2000/svg"
 68      xmlns:xlink="http://www.w3.org/1999/xlink"
 69      width="256"
 70      height="254"
 71      preserveAspectRatio="xMidYMid"
 72    >
 73      <defs>
 74        <linearGradient id="c" x1="50%" x2="50%" y1="0%" y2="100%">
 75          <stop offset="0%" stop-color="#FFF"></stop>
 76          <stop offset="100%" stop-color="#FFF" stop-opacity="0"></stop>
 77        </linearGradient>
 78        <path
 79          id="a"
 80          d="M180.828 252.605a15.872 15.872 0 0 0 12.65-.486l52.501-25.262a15.94 15.94 0 0 0 9.025-14.364V41.197a15.939 15.939 0 0 0-9.025-14.363l-52.5-25.263a15.877 15.877 0 0 0-18.115 3.084L74.857 96.35l-43.78-33.232a10.614 10.614 0 0 0-13.56.603L3.476 76.494c-4.63 4.211-4.635 11.495-.012 15.713l37.967 34.638-37.967 34.637c-4.623 4.219-4.618 11.502.012 15.714l14.041 12.772a10.614 10.614 0 0 0 13.56.604l43.78-33.233 100.507 91.695a15.853 15.853 0 0 0 5.464 3.571Zm10.464-183.649-76.262 57.889 76.262 57.888V68.956Z"
 81        ></path>
 82      </defs>
 83      <mask id="b" fill="#fff"></mask>
 84      <path
 85        fill="#0065A9"
 86        d="M246.135 26.873 193.593 1.575a15.885 15.885 0 0 0-18.123 3.08L3.466 161.482c-4.626 4.219-4.62 11.502.012 15.714l14.05 12.772a10.625 10.625 0 0 0 13.569.604L238.229 33.436c6.949-5.271 16.93-.315 16.93 8.407v-.61a15.938 15.938 0 0 0-9.024-14.36Z"
 87      ></path>
 88      <path
 89        fill="#007ACC"
 90        d="m246.135 226.816-52.542 25.298a15.887 15.887 0 0 1-18.123-3.08L3.466 92.207c-4.626-4.218-4.62-11.502.012-15.713l14.05-12.773a10.625 10.625 0 0 1 13.569-.603l207.132 157.135c6.949 5.271 16.93.315 16.93-8.408v.611a15.939 15.939 0 0 1-9.024 14.36Z"
 91      ></path>
 92      <path
 93        fill="#1F9CF0"
 94        d="M193.428 252.134a15.892 15.892 0 0 1-18.125-3.083c5.881 5.88 15.938 1.715 15.938-6.603V11.273c0-8.318-10.057-12.483-15.938-6.602a15.892 15.892 0 0 1 18.125-3.084l52.533 25.263a15.937 15.937 0 0 1 9.03 14.363V212.51c0 6.125-3.51 11.709-9.03 14.363l-52.533 25.262Z"
 95      ></path>
 96      <path
 97        fill="url(#c)"
 98        fill-opacity="0"
 99        d="M180.828 252.605a15.874 15.874 0 0 0 12.65-.486l52.5-25.263a15.938 15.938 0 0 0 9.026-14.363V41.197a15.939 15.939 0 0 0-9.025-14.363L193.477 1.57a15.877 15.877 0 0 0-18.114 3.084L74.857 96.35l-43.78-33.232a10.614 10.614 0 0 0-13.56.603L3.476 76.494c-4.63 4.211-4.635 11.495-.012 15.713l37.967 34.638-37.967 34.637c-4.623 4.219-4.618 11.502.012 15.714l14.041 12.772a10.614 10.614 0 0 0 13.56.604l43.78-33.233 100.506 91.695a15.857 15.857 0 0 0 5.465 3.571Zm10.464-183.65-76.262 57.89 76.262 57.888V68.956Z"
100      ></path>
101    </svg>
102 
103    <span>Vs Code</span>
104  </label>
105  <label>
106    <input value="value-3" name="value-radio" id="value-3" type="radio" />
107    <svg
108      preserveAspectRatio="xMidYMid"
109      xmlns="http://www.w3.org/2000/svg"
110      height="332"
111      width="256"
112      viewBox="0 0 256 332"
113    >
114      <defs>
115        <linearGradient
116          id="a"
117          y2="39.597%"
118          x2="63.68%"
119          y1="58.68%"
120          x1="55.117%"
121        >
122          <stop offset="0%" stop-color="#FF9700"></stop>
123          <stop offset="53%" stop-color="#F48E00"></stop>
124          <stop offset="100%" stop-color="#D06F00"></stop>
125        </linearGradient>
126      </defs>
127      <path
128        fill="url(#a)"
129        d="M255.288 166.795c0-3.887-2.872-6.128-6.397-5.015L6.397 238.675C2.865 239.796 0 243.86 0 247.74v78.59c0 3.887 2.865 6.135 6.397 5.015l242.494-76.888c3.525-1.12 6.397-5.185 6.397-9.071v-78.59Z"
130      ></path>
131      <path
132        fill="#FF9800"
133        d="M0 164.291c0 3.887 2.865 7.95 6.397 9.071l242.53 76.902c3.531 1.12 6.397-1.127 6.397-5.007V166.66c0-3.88-2.866-7.944-6.397-9.064L6.397 80.694C2.865 79.574 0 81.814 0 85.7v78.59Z"
134      ></path>
135      <path
136        fill="#FF9800"
137        d="M255.288 5.302c0-3.886-2.872-6.135-6.397-5.014L6.397 77.176C2.865 78.296 0 82.36 0 86.247v78.59c0 3.887 2.865 6.128 6.397 5.014l242.494-76.895c3.525-1.12 6.397-5.184 6.397-9.064V5.302Z"
138      ></path>
139    </svg>
140    <span>Sublime Text</span>
141  </label>
142  <span class="selection"></span>
143</div>
          
 1 
 2.radio-input input {
 3  display: none;
 4}
 5 
 6.radio-input {
 7  --container_height: 300px;
 8  position: relative;
 9  display: flex;
10  flex-direction: column;
11  align-items: center;
12  justify-content: space-between;
13  border-radius: 10px;
14  padding: 10px;
15  gap: var(--padding);
16  background-color: #fff;
17  color: #000000;
18  height: var(--container_height);
19  overflow: hidden;
20  border: 1px solid rgba(53, 52, 52, 0.226);
21}
22 
23.radio-input label {
24  width: 100%;
25  cursor: pointer;
26  display: flex;
27  flex-direction: column;
28  justify-content: center;
29  align-items: center;
30  gap: 4px;
31  z-index: 1;
32  font-weight: 600;
33  font-size: 14px;
34  height: 100%;
35}
36.radio-input label svg {
37  width: 30px;
38  height: 30px;
39}
40 
41.selection {
42  display: none;
43  position: absolute;
44  height: calc(var(--container_height) / 3 - 12px);
45  z-index: 0;
46  inset: 6px;
47  border-radius: 10px;
48  transition: 0.15s ease;
49}
50 
51.radio-input label:has(input:checked) {
52  color: #fff;
53}
54 
55.radio-input label:has(input:checked) ~ .selection {
56  display: inline-block;
57}
58.radio-input label:has(input:checked) svg {
59  stroke: white;
60  stroke-width: 10px;
61}
62 
63.radio-input label:nth-child(1):has(input:checked) ~ .selection {
64  transform: translateY(calc(var(--container_height) * 0 / 3));
65  background-color: #000000;
66}
67 
68.radio-input label:nth-child(2):has(input:checked) ~ .selection {
69  transform: translateY(calc(var(--container_height) * 1 / 3));
70  background-color: #1f9cf1;
71}
72 
73.radio-input label:nth-child(3):has(input:checked) ~ .selection {
74  transform: translateY(calc(var(--container_height) * 2 / 3));
75  background-color: #ff9801;
76}

MIT License

Copyright © 2026 Yaya12085 (Yaya Mohamed)


Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:


The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.


THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.