> For the complete documentation index, see [llms.txt](https://atd-dts.gitbook.io/moped-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://atd-dts.gitbook.io/moped-documentation/dev-guides/design-system/component-styles.md).

# 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)

## Forms

* The save button should be disabled when:
  * the form has validation errors
    * RHF `!isValid` form state
  * the form has not been changed
    * RHF `!isDirty` form state
  * a save or mutation is in progress
    * Apollo Client `useMutation` create or edit mutation loading state
* How this works out in form types:
  * **Create forms** open with the button disabled because required fields are empty and validation fails. The button enables once the user fills in everything required.
  * **Edit forms** open with the button disabled because the form has not yet been changed. The button enables once the user modifies a field, and re-disables if their changes leave the form in an invalid state.
* This assumes that the React Hook Form validation mode is set to `onChange` 
* We use Yup for validation schemas
* Required fields show "Required" helper text below them which is replaced by red-highlighted error messages when there are validation errors on the input
* See <https://refine.dev/blog/react-hook-form/#form-validation-in-react-hook-form-the-isvalid-prop> and RHF docs <https://react-hook-form.com/docs/useform/formstate>

## **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.&#x20;