Radiant UI: Radio Button featuring a stylish svg circle

Question

Radiant UI: Radio Button featuring a stylish svg circle

Hey everyone, I’ve been attempting to customize the Material-UI radio button using CSS modules but haven’t had much luck. It seems like the easiest solution would be to use the makeStyles function from Material-UI, however, I am required to work with CSS modules.

This is the standard Material-UI radio button:

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

I need to create this instead: https://i.sstatic.net/cwSTU.png.

Although Material-UI doesn't provide a check mark option, I believe I can achieve it with SVG. However, I’m struggling to figure out how to implement it. Any guidance or assistance would be greatly appreciated.

UPDATE: I realized that I could insert an SVG as a component using the Radio component's checkedIcon property, which I found in the Material-UI icons documentation here.

While this took care of my needs for the checked 'Active' state, I faced difficulties creating the 'Hover' effect. Initially, I thought I needed an SVG for this as well, only to realize that I could simply draw a circle using ::before or ::after as a pseudo element and style it to fit within the main circle, same goes for the 'Focus' state.

css reactjs material-ui

Answer 1

Answer №1

If you want to customize the appearance of the Checkbox component, you can make use of the icon and checkedIcon properties as described in the Checkbox API documentation (https://material-ui.com/api/checkbox/#props). You have the flexibility to pass any kind of component that renders your SVG graphic.

In response to a query about improving the visual presentation, I created a small demo inspired by the Material-UI checkbox demo. The demo incorporates CSS Modules to address additional requirements such as focus states. While not perfect, it aims to convey the concept (similar to hover states).

Here is an excerpt from the component:

import React from 'react';
// The CSS will be injected into the page by webpack, parcel, or other tools
import styles from './CssModulesCheckboxes.css';
import Checkbox from '@material-ui/core/Checkbox';

function StyledCheckbox(props) {
  return (
    <Checkbox
      checkedIcon={<span className={styles.checkedIcon} />}
      icon={<span className={styles.icon} />}
      inputProps={{ 'aria-label': 'decorative checkbox' }}
      {...props}
    />
  );
}

export default function CssModulesButton() {
  return (
    <div>
      <StyledCheckbox />
      <StyledCheckbox defaultChecked />
      <StyledCheckbox defaultChecked disabled />
    </div>
  );
}

And here is a snippet from the CSS module:

.icon {
  border-radius: 3px;
  width: 16px;
  height: 16px;  
  // Additional styling properties...
}

// Hover effects on input...

.checkedIcon {
  background-color: #137cbd;
  // More customized styles...
}

// Disabled state for checked icon...

To see this sample in action on CodeSandbox, visit: https://codesandbox.io/s/css-modules-vdbi8

Answer 2

If you want to customize the appearance of the Checkbox component, you can make use of the icon and checkedIcon properties as described in the Checkbox API documentation (https://material-ui.com/api/checkbox/#props). You have the flexibility to pass any kind of component that renders your SVG graphic.

In response to a query about improving the visual presentation, I created a small demo inspired by the Material-UI checkbox demo. The demo incorporates CSS Modules to address additional requirements such as focus states. While not perfect, it aims to convey the concept (similar to hover states).

Here is an excerpt from the component:

import React from 'react';
// The CSS will be injected into the page by webpack, parcel, or other tools
import styles from './CssModulesCheckboxes.css';
import Checkbox from '@material-ui/core/Checkbox';

function StyledCheckbox(props) {
  return (
    <Checkbox
      checkedIcon={<span className={styles.checkedIcon} />}
      icon={<span className={styles.icon} />}
      inputProps={{ 'aria-label': 'decorative checkbox' }}
      {...props}
    />
  );
}

export default function CssModulesButton() {
  return (
    <div>
      <StyledCheckbox />
      <StyledCheckbox defaultChecked />
      <StyledCheckbox defaultChecked disabled />
    </div>
  );
}

And here is a snippet from the CSS module:

.icon {
  border-radius: 3px;
  width: 16px;
  height: 16px;  
  // Additional styling properties...
}

// Hover effects on input...

.checkedIcon {
  background-color: #137cbd;
  // More customized styles...
}

// Disabled state for checked icon...

To see this sample in action on CodeSandbox, visit: https://codesandbox.io/s/css-modules-vdbi8

Answer 3

Answer №2

Give this code snippet a try:

Here is the HTML:

<div>
  <input type="radio" name="my-radio" id="radio-option-1"/>
  <label for="radio-option-1"> <span></span> Select Me </label>
</div>

<div>
  <input type="radio" name="my-radio" id="radio-option-2"/>
  <label for="radio-option-2"> <span></span> Choose Me 2</label>
</div>

<div>
  <input type="radio" name="my-radio" id="radio-option-3" active/>
  <label for="radio-option-3"> <span></span> Pick Me 3 (Active)</label>
</div>

<div>
  <input type="radio" name="my-radio" id="radio-option-4" disabled/>
  <label for="radio-option-4"> <span></span> Got Me 4 (Inactive)</label>
</div>

The CSS styles are as follows:

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

label {
  cursor:pointer;
  color: #555;
}

input[type="radio"] + label span {
    display: inline-block;
    vertical-align: middle;
    width: 45px;
    height: 45px;
    border: 2px solid #ff0000;
    border-radius: 10px;
    background-color: #ffffff;
    text-align: center;
}

input[type="radio"][disabled] + label span {
  background-color: #ececec;
  border: #ececec;
}

input[type="radio"][active] + label span {
   background-color: #ff0000;
}
input[type="radio"][active] + label span:hover {
  background-color: #ff0000;
  border: 2px solid #ff0000;
}

/* input[type="radio"] + label span:hover {
  text-align: center;
  vertical-align: bottom;
} */

input[type="radio"] + label span:focus {
  background-color: #ffffff;
}
input[type="radio"]:not([active]):not([disabled]):not(:checked) + label span:focus::before {
   content: '';
   display: inline-block;
   width: 70%;
   height: 70%;
   border-radius: 50%;
   background-color: #ff0000;
   border: 2px solid #ff0000;
   margin-top: calc(100% - 76%);
}

input[type="radio"]:not([active]):not([disabled]):not(:checked) + label span:hover::before {
   content: '';
   display: inline-block;
   width: 70%;
   height: 70%;
   border-radius: 50%;
   background-color: #ffffff;
   border: 2px solid #ff0000;
   margin-top: calc(100% - 85%);
}

input[type="radio"] + label span  {
  border-radius: 50%;
}

input[type="radio"][disabled] + label span::before,
input[type="radio"][active] + label span::before,
input[type="radio"]:checked + label span::before {
   content: "✓";
   color: #ffffff;
   text-align: center;
   font-size: 40px;
}

input[type="radio"]:checked + label span {
    background-color: #ff0000;
    text-align: center;
}

Check out the demo here: https://jsfiddle.net/40ktw6jv/58/

Answer 4

Give this code snippet a try:

Here is the HTML:

<div>
  <input type="radio" name="my-radio" id="radio-option-1"/>
  <label for="radio-option-1"> <span></span> Select Me </label>
</div>

<div>
  <input type="radio" name="my-radio" id="radio-option-2"/>
  <label for="radio-option-2"> <span></span> Choose Me 2</label>
</div>

<div>
  <input type="radio" name="my-radio" id="radio-option-3" active/>
  <label for="radio-option-3"> <span></span> Pick Me 3 (Active)</label>
</div>

<div>
  <input type="radio" name="my-radio" id="radio-option-4" disabled/>
  <label for="radio-option-4"> <span></span> Got Me 4 (Inactive)</label>
</div>

The CSS styles are as follows:

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

label {
  cursor:pointer;
  color: #555;
}

input[type="radio"] + label span {
    display: inline-block;
    vertical-align: middle;
    width: 45px;
    height: 45px;
    border: 2px solid #ff0000;
    border-radius: 10px;
    background-color: #ffffff;
    text-align: center;
}

input[type="radio"][disabled] + label span {
  background-color: #ececec;
  border: #ececec;
}

input[type="radio"][active] + label span {
   background-color: #ff0000;
}
input[type="radio"][active] + label span:hover {
  background-color: #ff0000;
  border: 2px solid #ff0000;
}

/* input[type="radio"] + label span:hover {
  text-align: center;
  vertical-align: bottom;
} */

input[type="radio"] + label span:focus {
  background-color: #ffffff;
}
input[type="radio"]:not([active]):not([disabled]):not(:checked) + label span:focus::before {
   content: '';
   display: inline-block;
   width: 70%;
   height: 70%;
   border-radius: 50%;
   background-color: #ff0000;
   border: 2px solid #ff0000;
   margin-top: calc(100% - 76%);
}

input[type="radio"]:not([active]):not([disabled]):not(:checked) + label span:hover::before {
   content: '';
   display: inline-block;
   width: 70%;
   height: 70%;
   border-radius: 50%;
   background-color: #ffffff;
   border: 2px solid #ff0000;
   margin-top: calc(100% - 85%);
}

input[type="radio"] + label span  {
  border-radius: 50%;
}

input[type="radio"][disabled] + label span::before,
input[type="radio"][active] + label span::before,
input[type="radio"]:checked + label span::before {
   content: "✓";
   color: #ffffff;
   text-align: center;
   font-size: 40px;
}

input[type="radio"]:checked + label span {
    background-color: #ff0000;
    text-align: center;
}

Check out the demo here: https://jsfiddle.net/40ktw6jv/58/

Radiant UI: Radio Button featuring a stylish svg circle

Answer №1

Answer №2

Similar questions

Does the html label prevent propagation from occurring?

Using React Router to Identify Whether an Element is Displayed within an Outlet or Directly as a Child of a Route

What is the best way to customize media queries in a child theme?

Style the modal body to display as a block on both desktop and mobile devices using CSS

Implementing border-right leads to alignment problems

Capture the keydown event for an input field

Multiple buttons in a single field

Using React TypeScript to create interactive maps with Highcharts

What is the best way to associate dates with a particular ID within a textfield's value?

The background image fails to load due to a quotation mark in the URL

React Native not refreshing state data

The design I created includes a horizontal scroll feature and certain elements are not properly aligned in the

What is the best way to target and style anchor links in CSS that are not empty?

Aligning Font Awesome icons inside md-buttonsFinding the perfect alignment for

What is the best way to transform React API data into props that can be utilized in different components?

Why does the useEffect() from before continue to run for a long period after the component has already been rendered?

Leveraging environment variables within the create-react-app package.json for proxy configuration

Loss of styling is observed with jQuery's html() function

Unable to successfully delete a row from MySQL DB using the API call

The stickiness of elements causes scrollbars to disappear in Chrome 77 on OSX