# Component styles

Moped is built with [Material UI](https://material-ui.com/) and [Devias](https://react-material-kit.devias.io/). We apply/retain the Material UI default styles and functionality unless user testing or technical complications justify customization.  

## **Text fields**

Use the **Standard** styling for all [text field](https://material-ui.com/components/text-fields/#textfield) inputs.

![](/files/-Mk4AocC3PLYlxb2L9eh)

## Select fields

Use the [basic standard variant](https://mui.com/components/selects/#filled-and-standard-variants) for **single select**. 

![](/files/-MlIp6ngIjMrFTRnV1kB)

If the value in a dropdown menu is not a required field, provide a `-` hyphen at the end of the list for users to clear any previously selected value. 

Use [checkmarks](https://mui.com/components/selects/#checkmarks) for **multiple select.** Checked boxes should be rendered in our `Primary Main` color. 

![](/files/-MlIpOP93YfI9eofZgHA)

## **Edit confirmation**

Based on the [Material Design confirmation dialog](https://material.io/design/communication/confirmation-acknowledgement.html#confirmation):

* Align on the right side
* "Cancel" to the left of "Save" button

![](/files/-MkNaO9FgTyzDIb_qTNh)

## Material Table customizations

* [ ] [Form validation fix](https://github.com/cityofaustin/atd-moped/pull/239)
* [ ] [Move action buttons to the far right](https://github.com/cityofaustin/atd-moped/pull/239#issuecomment-796869149)
* [ ] Add row button should have a specific text label 
* [ ] Add row button should remain in upper right
* [ ] Add row button should have a circle-plus icon instead of a square-plus icon (see "Projects" page)
* [ ] Hide/remove "Actions" column heading
* [ ] Show pagination only when there are more than 25 rows.
* [ ] Render dates as mm/dd/yyyy
* [ ] [Enable date-clearing](https://github.com/cityofaustin/atd-data-tech/issues/6159)
* [ ] Make the "No records to display" text context-dependent, e.g. "No team members to display" on the Team tab.
* [ ] Remove min-height on table
* [ ] Change table title from h6 to h2

![](/files/-MlHrQ69IxNIhhX6iQY_)

## **Icons**

Use the outline variant of the official [Google Material Icons](https://fonts.google.com/icons). [React Feather](https://feathericons.com/) is included in Devias, but doesn't have as many icons. 


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://atd-dts.gitbook.io/moped-documentation/dev-guides/design-system/component-styles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.