React Material-UI Cookbook

There's more...

You can use input adornments for more than buttons that reveal the value of a password field. For example, in a field that is validated, you can use input adornments to help visualize the validation state of the field. Let's say that you need to validate an email field as the user types. You could create an abstraction in the form of a component that changes the color and the adornment of the component based on the result of validating what the user has provided. Here's what that component looks like:

const ValidationField = props => {  const { isValid, ...rest } = props;  const empty = props.value === '';  const valid = isValid(props.value);  let startAdornment;  if (empty) {    startAdornment = null;  } else if (valid) { startAdornment ...