Material UI Chips with Select

Material UI > Material UI Chips with Select

In this example we will demonstrate creating a status select, combining Material UI's Chip and Select components.

Material UI Chip color

To set the Chip color on a Material-UI Chip, simply use the inline style prop to set the backgroundColor as a normal CSS prop. If you want to get fancy, you can wrap this component with Styled-components or Material-UI's withStyles to set the root CSS attribute. But, that was a bit too complicated for this example. Check out the examples in the editor to the right.

Material UI Chip Icon color

If you use the avatar prop on a Chip, you can pass through an Icon component. Setting the Icon color is also as easy as setting an inline styles prop with a color CSS prop. See the above Sandbox for more details.

Creating a Chip Select for Project Statuses

This follows the above Youtube video.

So I first go to the Material UI documentation for Chips. I don't need much of this so I just find a basic example. I stop to play with the Chip Playground, just to see if any of the other parameters are interesting for this case.

Next I go and create a new file which I'm going to call the StatusChip. This component's purpose is to dynamically render a Chip based the current task's status. I don't want it to be more complicated than that, we can add the additional code for interactivity and dropdown to the task dialog itself. So keeping this component simple.

I import this component and replace the existing chip with my new component and confirm everything still works.

I open up the Chrome Inspector to see what CSS I need to change to set the background color. I observe that simply setting the background color on the root chip component will be sufficient.

Next I check the Material UI color palette to find colors for the statuses I want. I'm mostly just looking at the shades here to see that I want the 300 value of the color. I next test that I can set the inline style of the chip with the style prop like so. I import Material UI colors and try a test value of green[300]. I see that that works. I also see that I want to set the text color white as well.

I import the rest of the colors and create a switch statement to determine which color I should show for each status.

I stop and realize my prettier isn't working on this project so I set that up again to get my formatting properly.

I now confirm that my new method works.

I also add a new blocked status here so there is a red color as well. Just makes the status feature a bit more interesting

Now I update my TaskDialog to have the taskId that I want to render. I haven't set this up yet so it was displaying some blank values. The values were actually set from another dialog in my app so I have to wire up a new set of attributes for my tasks.

I import my redux selector for the tasks and use that to get the task data. I originally wanted to make a selector for each task individually, but I forgot how to pass in arguments to a selector and realized it would be easier to just find the task inside the Dialog after getting all the tasks. I already had a selector to get all the tasks so this was easy to do.

So I find the task in my dialog and I can confirm that I'm seeing the correct data for that task. I am using the name attribute for a lot of dummy inputs so that is why you are see it appearing in a few spots here.

I finish wiring up the task attributes and you can now see the status correctly appearing as a text input.

But I want it to be a dropdown and include my new SelectChip component, so now I will implement that. This will allow users to pick different statuses from a dropdown.

I remove the input and use the status chip I created earlier. But you can see there is no label above it and there is not a lot of padding between the above input.

I play around with some FormLabel styling until I am happy with a label that looks nice. I am using some inline styles here again just because I'm not sure this are the components I'm going with yet.

I'm happy with how this looks for now. But there's no interactivity, so its time now to implement a select component to pick the different statuses.

I browse the material UI website and it takes me a bit to find an example of a select that has a custom menu item in the dropdown. I want to render the chips inside the dropdown menu which is different from a regular dropdown.

As you can see from the documentation here, you can put anything you want inside the select within a MenuItem, so I decide to copy this example and run with it.

After pasting my StatusChip in the MenuItem and updating all the attributes I am surprised how good it looks on the first try. How great does that look?

Finally I need to set up the change handler so I simply use the react hook I created earlier for the status state and forget that I need to use e.target.value in the change handler. Very common mistake.

The change handler works and I am happy with this and can resume implementing my dialog features.

Thank you for reading this. Check out our free Material-UI template.

Lesson 9/12

import React from "react";
import ReactDOM from "react-dom";
import ChipSelect from "./ChipSelect";
import StatusChip from "./StatusChip";

function App() {
  return (
    <div>
      <StatusChip status="completed" />
      <div />
      <ChipSelect />
    </div>
  );
}

export default App;

Open Sandbox