CODEWITHSUNDEEP
reactjsmaterial-ui
Tom Stambaugh
Tom Stambaugh

Reputation: 1039

How to make smaller radio buttons

I can't find a way to create a group of three small (19px high) labelled radio buttons in material-ui. I'm migrating a browser app from static HTML/JS into material-ui/react, and I need the group to stay the same size.

The button group I'm starting with has three small vertically aligned labelled radio buttons. Here's a screenshot:

enter image description here

Here's the code for the best I've been able to do using the material-ui documentation:

<FormControl
  margin="dense"
  size="small"
>
  <RadioGroup
    size="small" 
    name="dataSource"
    value={dataSource}
    onChange={handleDataSourceChange}
  >
    <FormControlLabel
      value="CaseCount"
      control={
        <Radio
          className={classes.radio}
          size="small" 
        />
      } 
      label="Cases"
    />
    <FormControlLabel
      value="DeathCount"
      control={
        <Radio
          className={classes.radio}
          size="small" 
        />
      } 
      label="Deaths"
    />
    <FormControlLabel
      value="HotSpots"
      control={
        <Radio
          size="small" 
        />
      } 
      label="HotSpot warning"
    />
  </RadioGroup>
</FormControl>

This results in an oversized group -- the button icons are too large, the text is too large, and each row is 38 pixels high (twice the 19 pixels of the original). Here's a screenshot of the material-ui counterpart:

enter image description here

I think I want the result to use a vanilla html input (with type of radio) instead of an svg icon, and a font with font-height of 13px. How do I do that in material-ui?

I know how to fix the padding-left so I'm not worried about that. How do I get rows that are 19px high instead of 38px?

Upvotes: 1

Views: 4013

Answers (1)

AnsonH
AnsonH

Reputation: 3325

Reason

If you inspect the Material radio button, we can see that the padding of the radio button is causing each row to have a height of 38px.

Radio button padding

Code

Therefore, we can simply remove the vertical padding from all radio buttons with the following code (note that my code is slightly different than yours):

const useStyles = makeStyles({
  // Applied to <Radio />
  root: {
    width: 19,
    height: 19,
    paddingTop: 0,
    paddingBottom: 0,
  },
  // Applied to <FormControlLabel />
  label: {
    fontSize: 13
  }
});

export default function RadioButtonsGroup() {
  const [value, setValue] = React.useState("CaseCount");
  const classes = useStyles();

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const customRadio = <Radio size="small" classes={{root: classes.root}} />;

  return (
    <FormControl component="fieldset">
      <RadioGroup value={value} onChange={handleChange}>
        <FormControlLabel classes={{label: classes.label}} control={customRadio} value="CaseCount" label="Cases" />
        <FormControlLabel classes={{label: classes.label}} control={customRadio} value="DeathCount" label="Deaths" />
        <FormControlLabel
          classes={{label: classes.label}}
          control={customRadio}
          value="HotSpots"
          label="Hotspot Warning"
        />
      </RadioGroup>
    </FormControl>
  );
}

Edit on CodeSandbox

Results

Explanation

According to the Radio API documentation, we can apply custom styling to root of the radio button by overriding styles with classes using the class name of root. Therefore, we first define a style object called root in the makeStyles() function. Next, we apply the styling to the Radio component by adding the prop of classes={{root: classes.root}}:

<Radio size="small" classes={{root: classes.root}} />

Similarly, according to the FormControlLabel API documentation, we can apply custom styling to the text label using the label class name. Therefore, we first define a style object of label in the makeStyles() function. Next, we apply the styling to the FormControlLabel component by adding the prop of classes={{label: classes.label}}:

<FormControlLabel classes={{label: classes.label}} /* ... */ />

Upvotes: 3

Related Questions