Material UI — Date and Time Pickers and Radio Buttons

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to add date and time pickers and radio buttons with Material UI.

Date / Time Pickers

We can add a native date picker with the type set to date .

For example, we can write:

import React from "react";
import TextField from "@material-ui/core/TextField";

export default function App() {
  return (
    <div>
      <form noValidate>
        <TextField
          id="date"
          label="Birthday"
          type="date"
          defaultValue="2020-05-26"
          InputLabelProps={{
            shrink: true
          }}
        />
      </form>
    </div>
  );
}

to add a date picker.

We used the TextField component to add the text field.

defaultValue is used to set the default value of the picker.

Date and Time Pickers

If we want to add a picker for both the date and time, we can set the type

For example, we can write:

import React from "react";
import TextField from "@material-ui/core/TextField";

export default function App() {
  return (
    <div>
      <form noValidate>
        <TextField
          id="date"
          label="Birthday"
          type="datetime-local"
          defaultValue="2021-05-26T10:30"
          InputLabelProps={{
            shrink: true
          }}
        />
      </form>
    </div>
  );
}

We set the type to datetime-local to show a native date and time picker.

Time Pickers

To add a time picker only, we can set the type of the TextField to time .

For example, we can write:

import React from "react";
import TextField from "@material-ui/core/TextField";

export default function App() {
  return (
    <div>
      <form noValidate>
        <TextField
          id="time"
          label="Clock"
          type="time"
          defaultValue="07:30"
          InputLabelProps={{
            shrink: true
          }}
        />
      </form>
    </div>
  );
}

to display a native time picker.

Radio Buttons

Radio buttons let the user select one option from a set.

We can put one more radio buttons into a RadioGroup .

For example, we can write:

import React from "react";
import RadioGroup from "@material-ui/core/RadioGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Radio from "@material-ui/core/Radio";

export default function App() {
  const [value, setValue] = React.useState("apple");

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

  return (
    <div>
      <form noValidate>
        <RadioGroup name="fruit" value={value} onChange={handleChange}>
          <FormControlLabel value="apple" control={<Radio />} label="apple" />
          <FormControlLabel value="orange" control={<Radio />} label="orange" />
          <FormControlLabel value="banana" control={<Radio />} label="banana" />
          <FormControlLabel
            value="grape"
            disabled
            control={<Radio />}
            label="grape"
          />
        </RadioGroup>
      </form>
    </div>
  );
}

We added the RadioGroup component to add a group of radio buttons.

Then we add the FormControlLabel to add the label for the radio button.

The value is the value for the radio button.

And we put the radio button inside each FormControlLabel .

The label sets the label of each radio button.

We can add a disable radio button with the disabled prop.

To set the value that the user selects as the state value, we have the handleChange function passed to the onChange prop.

Then we can set the value of the value prop as the value of the value state when we select an option.

Standalone Radio Buttons

The Radio component can be used as a standalone component.

For example, we can write:

import React from "react";
import Radio from "@material-ui/core/Radio";

export default function App() {
  const [value, setValue] = React.useState("apple");

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

  return (
    <div>
      <form noValidate>
        <Radio
          checked={value === "apple"}
          onChange={handleChange}
          value="apple"
          name="fruit"
        />
        <Radio
          checked={value === "orange"}
          onChange={handleChange}
          value="orange"
          name="fruit"
        />
      </form>
    </div>
  );
}

We have a Radio components to show the radio buttons without the labels.

The checked state is set by comparing the selectedvalue against the value of the radio button.

onChange is the same as the previous example.

Label Placement

The placement of the label can be changed with the labelPlacement prop.

For example, we can write:

import React from "react";
import Radio from "@material-ui/core/Radio";
import FormControlLabel from "@material-ui/core/FormControlLabel";

export default function App() {
  return (
    <div>
      <form noValidate>
        <FormControlLabel
          value="bottom"
          control={<Radio color="primary" />}
          label="Bottom"
          labelPlacement="bottom"
        />
      </form>
    </div>
  );
}

We set the labelPlacement prop to bottom to place the label below the radio button.

Other possible values include top , start , and end .

Conclusion

We can add date and time pickers with the TextField component.

To add radio buttons, we can use FormControlLabel and Radio components.

Radio buttons can be added without labels.