Steps to design a unique input radio button with embedded attributes

Question

Steps to design a unique input radio button with embedded attributes

In my current project, I am utilizing react styled components for styling. One issue that I have encountered is with the text placement within a box and the need to style it differently when checked.

What have I attempted so far?

I created an outer div and placed a radio input inside it with a display:none property. My intention was to style the outer element while keeping the radio button hidden. However, this approach rendered the radio button unclickable. Is there a solution to this problem? A react-specific solution would be highly appreciated.

.radio__input{
  display:none;
}

.radiobox{
  width:60px;
  height:60px;
  border:1px solid black;
}

//I want the div radiobox to be styled when one radiobox is selected

<div class="radiobox">
  <input type="radio" class="radio__input" name="radio"/>
  XS
</div>
<div class="radiobox">
  <input type="radio" class="radio__input" name="radio"/>
  S
</div>

https://i.sstatic.net/twwD4.png

javascript html css reactjs

Answer 1

Answer №1

I have implemented unique IDs for each radio button, allowing the <label> element's for attribute to link the labels with the corresponding radio buttons. This setup ensures that clicking on the label also checks the associated input. After setting up the functionality, I proceeded to style the radio buttons in their initial and checked states. It is important to note that CSS can only target elements based on the checked state of an input if they are siblings or children. Unfortunately, directly styling a parent element like the .radiobox container using pure CSS is not possible.

.radiobox {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  display: inline-block;
}

input[type="radio"] {
  appearance: none;
}

input[type="radio"] + label {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

input[type="radio"]:checked + label {
  background: blue;
}

<div class="radiobox">
  <input type="radio" id="s" name="radio"/>
  <label for="s">S</label>
</div>

<div class="radiobox">
  <input type="radio" id="m" name="radio"/>
  <label for="m">M</label>
</div>

Answer 2

I have implemented unique IDs for each radio button, allowing the <label> element's for attribute to link the labels with the corresponding radio buttons. This setup ensures that clicking on the label also checks the associated input. After setting up the functionality, I proceeded to style the radio buttons in their initial and checked states. It is important to note that CSS can only target elements based on the checked state of an input if they are siblings or children. Unfortunately, directly styling a parent element like the .radiobox container using pure CSS is not possible.

.radiobox {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  display: inline-block;
}

input[type="radio"] {
  appearance: none;
}

input[type="radio"] + label {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

input[type="radio"]:checked + label {
  background: blue;
}

<div class="radiobox">
  <input type="radio" id="s" name="radio"/>
  <label for="s">S</label>
</div>

<div class="radiobox">
  <input type="radio" id="m" name="radio"/>
  <label for="m">M</label>
</div>

Answer 3

Answer №2

It is vital to have the radio button accessible while still maintaining its functionality.

An effective way to style radio buttons is by targeting their <label> element and using the CSS Adjacent sibling combinator based on the radio button's state.

Considerations for improving accessibility include:

Using <fieldset> to give an accessible name to the option group, even if it seems self-explanatory like "Green"
Ensuring focus visibility, which can be achieved by displaying the radio button within the fieldset
Providing each radio button with an accessible name, including hidden text inside labels

.color-options {
  display: flex;
  padding: .2em;
  gap: .4em;
}

.color-options:focus-within {
  outline: .2em solid blue;
}

.color-option {
  width: 2em;
  height: 2em;
}

input:checked+.color-option {
  outline: .2em solid darkseagreen;
}

/* credits to Scott O'Hara 
   https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

<fieldset>
  <legend>Color</legend>

  <div class="color-options">
    <input type="radio" name="color" value="gray" id="color-gray" class="visually-hidden">
    <label class="color-option" style="background-color: gray" for="color-gray">
    <span class="visually-hidden">
    Gray
    </span>
  </label>

    <input type="radio" name="color" value="black" id="color-black" class="visually-hidden">
    <label class="color-option" style="background-color: black" for="color-black">
    <span class="visually-hidden">
    Black
    </span>
  </label>

    <input type="radio" name="color" value="darkgreen" id="color-darkgreen" class="visually-hidden">
    <label class="color-option" style="background-color: darkgreen" for="color-darkgreen">
    <span class="visually-hidden">
    Dark Green
    </span>
  </label>

  </div>
</fieldset>

Answer 4

It is vital to have the radio button accessible while still maintaining its functionality.

An effective way to style radio buttons is by targeting their <label> element and using the CSS Adjacent sibling combinator based on the radio button's state.

Considerations for improving accessibility include:

Using <fieldset> to give an accessible name to the option group, even if it seems self-explanatory like "Green"
Ensuring focus visibility, which can be achieved by displaying the radio button within the fieldset
Providing each radio button with an accessible name, including hidden text inside labels

.color-options {
  display: flex;
  padding: .2em;
  gap: .4em;
}

.color-options:focus-within {
  outline: .2em solid blue;
}

.color-option {
  width: 2em;
  height: 2em;
}

input:checked+.color-option {
  outline: .2em solid darkseagreen;
}

/* credits to Scott O'Hara 
   https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

<fieldset>
  <legend>Color</legend>

  <div class="color-options">
    <input type="radio" name="color" value="gray" id="color-gray" class="visually-hidden">
    <label class="color-option" style="background-color: gray" for="color-gray">
    <span class="visually-hidden">
    Gray
    </span>
  </label>

    <input type="radio" name="color" value="black" id="color-black" class="visually-hidden">
    <label class="color-option" style="background-color: black" for="color-black">
    <span class="visually-hidden">
    Black
    </span>
  </label>

    <input type="radio" name="color" value="darkgreen" id="color-darkgreen" class="visually-hidden">
    <label class="color-option" style="background-color: darkgreen" for="color-darkgreen">
    <span class="visually-hidden">
    Dark Green
    </span>
  </label>

  </div>
</fieldset>

Steps to design a unique input radio button with embedded attributes

Answer №1

Answer №2

Similar questions

Transmit a message from the background.js script to the popup window

What steps should I take to troubleshoot the 'TypeError: userId is not a function' error in my unban feature?

Shut down React Modal

Retrieve user details from a NextJS application following a successful Keycloak authentication on a Kubernetes cluster

CSS - Apply a captivating background to specific columns within a grid layout

Tips for creating a condensed header

What is the best way to send a prop for inline styling in a React component that contains an array of data?

Ensuring props are resilient even when an incorrect type is provided during testing

Challenges in aligning images side by side within an XSLT document

The frontend forgets a user's logged-in status when the page is refreshed

Unable to generate file with Compass

retrieve all the table data cells except for the initial one

Transforming an SQL Query into JSON format using Oracle 11g in Oracle Application Express (APEX)

Functionality of the Parameters Object

Generating random values from an array in PHP without the need to refresh the page

What is the best way to organize objects by their respective dates?

What is the best way to execute multiple functions in sequence and halt the process if any of them encounter an error?

Material UI AppBar displaying custom colors instead of theme colors

Book of Tales displaying Emotion Styling upon initial load only

Discover the process of dynamically importing JavaScript libraries, modules, and non-component elements within a Next.js