diff --git a/.changeset/four-keys-study.md b/.changeset/four-keys-study.md
new file mode 100644
index 000000000..9dfd2b76d
--- /dev/null
+++ b/.changeset/four-keys-study.md
@@ -0,0 +1,5 @@
+---
+"@suid/material": minor
+---
+
+Add `NativeSelect` component
diff --git a/ROADMAP.md b/ROADMAP.md
index 74d17f1c8..f4b367470 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -122,7 +122,7 @@
 | MenuList                |       |
 | MobileStepper           |       |
 | Modal                   |  ✅   |
-| NativeSelect            |       |
+| NativeSelect            |  ✅   |
 | NoSsr                   |       |
 | OutlinedInput           |  ✅   |
 | Pagination              |       |
diff --git a/packages/material/src/NativeSelect/NativeSelect.tsx b/packages/material/src/NativeSelect/NativeSelect.tsx
new file mode 100644
index 000000000..64948c5fb
--- /dev/null
+++ b/packages/material/src/NativeSelect/NativeSelect.tsx
@@ -0,0 +1,114 @@
+import { getNativeSelectUtilityClasses, NativeSelectTypeMap } from ".";
+import formControlState from "../FormControl/formControlState";
+import useFormControl from "../FormControl/useFormControl";
+import Input, { InputProps } from "../Input";
+import ArrowDropDownIcon from "../internal/svg-icons/ArrowDropDown";
+import NativeSelectInput from "./NativeSelectInput";
+import createComponentFactory from "@suid/base/createComponentFactory";
+import clsx from "clsx";
+import { JSXElement, mergeProps, splitProps } from "solid-js";
+
+const $ = createComponentFactory<NativeSelectTypeMap>()({
+  name: "MuiNativeSelect",
+  selfPropNames: [
+    "children",
+    "classes",
+    "IconComponent",
+    "input",
+    "inputProps",
+    "onChange",
+    "value",
+    "variant",
+  ],
+  utilityClass: getNativeSelectUtilityClasses,
+  slotClasses: () => ({
+    root: ["root"],
+  }),
+});
+
+const defaultInput = () => <Input />;
+/**
+ * An alternative to `<Select native />` with a much smaller bundle size footprint.
+ *
+ * Demos:
+ *
+ * - [Selects](https://mui.com/components/selects/)
+ *
+ * API:
+ *
+ * - [NativeSelect API](https://mui.com/api/native-select/)
+ * - inherits [Input API](https://mui.com/api/input/)
+ */
+const NativeSelect = $.defineComponent(function NativeSelect(inProps) {
+  const props = $.useThemeProps({ props: inProps });
+  const [, other] = splitProps(props, [
+    "className",
+    "children",
+    "classes",
+    "IconComponent",
+    "input",
+    "inputProps",
+    "variant",
+  ]);
+
+  const baseProps = mergeProps(
+    {
+      classes: {},
+      IconComponent: ArrowDropDownIcon,
+      input: defaultInput,
+    },
+    props
+  );
+
+  if (baseProps.input !== defaultInput)
+    // This feat requires component introspection (not supported by SolidJS)
+    throw new Error(`NativeSelect 'input' custom property is not supported.`);
+
+  const muiFormControl = useFormControl();
+  const fcs = formControlState({
+    props: props,
+    muiFormControl: muiFormControl,
+    states: ["variant"],
+  });
+
+  const ownerState = mergeProps(props, {
+    get classes() {
+      return baseProps.classes;
+    },
+  });
+  const classes = $.useClasses(ownerState);
+  const [, otherClasses] = splitProps(baseProps.classes, ["root"]);
+
+  const inputProps = mergeProps(
+    {
+      get children() {
+        return props.children;
+      },
+      classes: otherClasses,
+      get IconComponent() {
+        return baseProps.IconComponent;
+      },
+      get variant() {
+        return fcs.variant;
+      },
+      type: undefined,
+    },
+    () => props.inputProps || {}
+    //() => (baseProps.input ? baseProps.input.props.inputProps : {})
+  );
+
+  return (
+    <Input
+      inputComponent={NativeSelectInput as JSXElement}
+      inputProps={inputProps as InputProps["inputProps"]}
+      {...(other as InputProps)}
+      className={clsx(
+        classes.root,
+        //baseProps.input.props.className,
+        props.className
+      )}
+    />
+  );
+});
+
+export default NativeSelect;
diff --git a/packages/material/src/NativeSelect/NativeSelectInput.tsx b/packages/material/src/NativeSelect/NativeSelectInput.tsx
new file mode 100644
index 000000000..bca429205
--- /dev/null
+++ b/packages/material/src/NativeSelect/NativeSelectInput.tsx
@@ -0,0 +1,203 @@
+import { Theme } from "../styles";
+import styled, { skipRootProps } from "../styles/styled";
+import capitalize from "../utils/capitalize";
+import { getNativeSelectUtilityClasses } from "./nativeSelectClasses";
+import nativeSelectClasses from "./nativeSelectClasses";
+import composeClasses from "@suid/base/composeClasses";
+import { SxProps } from "@suid/system";
+import createRef from "@suid/system/createRef";
+import { SxPropsObject } from "@suid/system/sxProps";
+import * as ST from "@suid/types";
+import clsx from "clsx";
+import { splitProps, mergeProps, Show } from "solid-js";
+
+export interface NativeSelectInputProps extends ST.PropsOf<"select"> {
+  disabled?: boolean;
+  IconComponent: ST.ElementType;
+  inputRef?: ST.Ref<HTMLSelectElement>;
+  variant?: "standard" | "outlined" | "filled";
+  sx?: SxProps<Theme>;
+}
+
+const useUtilityClasses = (
+  ownerState: NativeSelectInputProps & {
+    open?: boolean;
+    classes?: Record<string, string>;
+  }
+) => {
+  const slots = {
+    select: [
+      "select",
+      ownerState.variant,
+      ownerState.disabled && "disabled",
+      ownerState.multiple && "multiple",
+    ],
+    icon: [
+      "icon",
+      `icon${capitalize(ownerState.variant!)}`,
+      ownerState.open && "iconOpen",
+      ownerState.disabled && "disabled",
+    ],
+  };
+
+  return composeClasses(
+    slots,
+    getNativeSelectUtilityClasses,
+    ownerState.classes
+  );
+};
+
+export const nativeSelectSelectStyles: (data: {
+  ownerState: any;
+  theme: Theme;
+}) => SxPropsObject<Theme> = ({ ownerState, theme }) => ({
+  MozAppearance: "none", // Reset
+  WebkitAppearance: "none", // Reset
+  // When interacting quickly, the text can end up selected.
+  // Native select can't be selected either.
+  userSelect: "none",
+  borderRadius: 0, // Reset
+  cursor: "pointer",
+  "&:focus": {
+    // Show that it's not an text input
+    backgroundColor:
+      theme.palette.mode === "light"
+        ? "rgba(0, 0, 0, 0.05)"
+        : "rgba(255, 255, 255, 0.05)",
+    borderRadius: 0, // Reset Chrome style
+  },
+  // Remove IE11 arrow
+  "&::-ms-expand": {
+    display: "none",
+  },
+  [`&.${nativeSelectClasses.disabled}`]: {
+    cursor: "default",
+  },
+  "&[multiple]": {
+    height: "auto",
+  },
+  "&:not([multiple]) option, &:not([multiple]) optgroup": {
+    backgroundColor: theme.palette.background.paper,
+  },
+  // Bump specificity to allow extending custom inputs
+  "&&&": {
+    paddingRight: 24,
+    minWidth: 16, // So it doesn't collapse.
+  },
+  ...(ownerState.variant === "filled" && {
+    "&&&": {
+      paddingRight: 32,
+    },
+  }),
+  ...(ownerState.variant === "outlined" && {
+    borderRadius: theme.shape.borderRadius,
+    "&:focus": {
+      borderRadius: theme.shape.borderRadius, // Reset the reset for Chrome style
+    },
+    "&&&": {
+      paddingRight: 32,
+    },
+  }),
+});
+
+const NativeSelectSelect = styled("select", {
+  name: "MuiNativeSelect",
+  slot: "Select",
+  skipProps: skipRootProps,
+  overridesResolver: (props, styles) => {
+    const { ownerState } = props;
+
+    return [
+      styles.select,
+      styles[ownerState.variant],
+      { [`&.${nativeSelectClasses.multiple}`]: styles.multiple },
+    ];
+  },
+})(nativeSelectSelectStyles);
+
+export const nativeSelectIconStyles: (data: {
+  ownerState: any;
+  theme: Theme;
+}) => SxPropsObject<Theme> = ({ ownerState, theme }) => ({
+  // We use a position absolute over a flexbox in order to forward the pointer events
+  // to the input and to support wrapping tags..
+  position: "absolute",
+  right: 0,
+  top: "calc(50% - .5em)", // Center vertically, height is 1em
+  pointerEvents: "none", // Don't block pointer events on the select under the icon.
+  color: theme.palette.action.active,
+  [`&.${nativeSelectClasses.disabled}`]: {
+    color: theme.palette.action.disabled,
+  },
+  ...(ownerState.open && {
+    transform: "rotate(180deg)",
+  }),
+  ...(ownerState.variant === "filled" && {
+    right: 7,
+  }),
+  ...(ownerState.variant === "outlined" && {
+    right: 7,
+  }),
+});
+
+const NativeSelectIcon = styled("svg", {
+  name: "MuiNativeSelect",
+  slot: "Icon",
+  overridesResolver: (props, styles) => {
+    const { ownerState } = props;
+    return [
+      styles.icon,
+      ownerState.variant && styles[`icon${capitalize(ownerState.variant)}`],
+      ownerState.open && styles.iconOpen,
+    ];
+  },
+})(nativeSelectIconStyles);
+
+/**
+ * @ignore - internal component.
+ */
+const NativeSelectInput = function NativeSelectInput(
+  props: NativeSelectInputProps
+) {
+  const ref = createRef(props);
+
+  const [, other] = splitProps(props, [
+    "className",
+    "disabled",
+    "IconComponent",
+    "inputRef",
+    "variant",
+  ]);
+
+  const baseProps = mergeProps({ variant: "standard" }, props);
+
+  const ownerState = mergeProps(props, {
+    get disabled() {
+      return props.disabled;
+    },
+    get variant() {
+      return baseProps.variant;
+    },
+  });
+
+  const classes = useUtilityClasses(ownerState);
+  return (
+    <>
+      <NativeSelectSelect
+        ownerState={ownerState}
+        class={clsx(classes.select, props.className)}
+        disabled={props.disabled}
+        ref={props.inputRef || ref}
+        {...other}
+      />
+      <Show when={!props.multiple}>
+        <NativeSelectIcon
+          component={props.IconComponent}
+          ownerState={ownerState}
+          class={classes.icon}
+        />
+      </Show>
+    </>
+  );
+};
+export default NativeSelectInput;
diff --git a/packages/material/src/NativeSelect/NativeSelectProps.tsx b/packages/material/src/NativeSelect/NativeSelectProps.tsx
new file mode 100644
index 000000000..3663280cd
--- /dev/null
+++ b/packages/material/src/NativeSelect/NativeSelectProps.tsx
@@ -0,0 +1,76 @@
+import { Theme } from "..";
+import { InputProps } from "../Input";
+import { NativeSelectInputProps } from "./NativeSelectInput";
+import { NativeSelectClasses } from "./nativeSelectClasses";
+import { SxProps } from "@suid/system";
+import * as ST from "@suid/types";
+import { JSXElement } from "solid-js";
+
+export type NativeSelectTypeMap<P = {}, D extends ST.ElementType = "div"> = {
+  name: "MuiNativeSelect";
+  defaultPropNames: "classes" | "IconComponent" | "input";
+  selfProps: {
+    /**
+     * The option elements to populate the select with.
+     * Can be some `<option>` elements.
+     */
+    children?: JSXElement;
+
+    /**
+     * Override or extend the styles applied to the component.
+     * @default {}
+     */
+    classes?: Partial<NativeSelectClasses>;
+
+    /**
+     * The icon that displays the arrow.
+     * @default ArrowDropDownIcon
+     */
+    IconComponent?: ST.ElementType;
+
+    /**
+     * An `Input` element; does not have to be a material-ui specific `Input`.
+     * @default <Input />
+     */
+    input?: ST.ElementType;
+
+    /**
+     * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attributes) applied to the `select` element.
+     */
+    inputProps?: Partial<NativeSelectInputProps>;
+
+    /**
+     * Callback fired when a menu item is selected.
+     *
+     * @param {ST.ChangeEvent<HTMLSelectElement>} event The event source of the callback.
+     * You can pull out the new value by accessing `event.target.value` (string).
+     */
+    onChange?: (event: ST.ChangeEvent<HTMLSelectElement>) => any;
+
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+
+    /**
+     * The `input` value. The DOM API casts this to a string.
+     */
+    value?: unknown;
+
+    /**
+     * The variant to use.
+     */
+    variant?: "standard" | "outlined" | "filled";
+  };
+  props: P &
+    NativeSelectTypeMap["selfProps"] &
+    Omit<InputProps, "inputProps" | "value" | "onChange">;
+  defaultComponent: D;
+};
+
+export type NativeSelectProps<
+  D extends ST.ElementType = NativeSelectTypeMap["defaultComponent"],
+  P = {}
+> = ST.OverrideProps<NativeSelectTypeMap<P, D>, D>;
+
+export default NativeSelectProps;
diff --git a/packages/material/src/NativeSelect/index.tsx b/packages/material/src/NativeSelect/index.tsx
new file mode 100644
index 000000000..ce2cbdb2f
--- /dev/null
+++ b/packages/material/src/NativeSelect/index.tsx
@@ -0,0 +1,7 @@
+export { default } from "./NativeSelect";
+export * from "./NativeSelect";
+
+export { default as nativeSelectClasses } from "./nativeSelectClasses";
+export * from "./nativeSelectClasses";
+
+export * from "./NativeSelectProps";
diff --git a/packages/material/src/NativeSelect/nativeSelectClasses.ts b/packages/material/src/NativeSelect/nativeSelectClasses.ts
new file mode 100644
index 000000000..0e100801a
--- /dev/null
+++ b/packages/material/src/NativeSelect/nativeSelectClasses.ts
@@ -0,0 +1,58 @@
+import generateUtilityClass from "@suid/base/generateUtilityClass";
+import generateUtilityClasses from "@suid/base/generateUtilityClasses";
+
+export interface NativeSelectClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the select component `select` class. */
+  select: string;
+  /** Styles applied to the select component if `multiple={true}`. */
+  multiple: string;
+  /** Styles applied to the select component if `variant="filled"`. */
+  filled: string;
+  /** Styles applied to the select component if `variant="outlined"`. */
+  outlined: string;
+  /** Styles applied to the select component if `variant="standard"`. */
+  standard: string;
+  /** State class applied to the select component `disabled` class. */
+  disabled: string;
+  /** Styles applied to the icon component. */
+  icon: string;
+  /** Styles applied to the icon component if the popup is open. */
+  iconOpen: string;
+  /** Styles applied to the icon component if `variant="filled"`. */
+  iconFilled: string;
+  /** Styles applied to the icon component if `variant="outlined"`. */
+  iconOutlined: string;
+  /** Styles applied to the icon component if `variant="standard"`. */
+  iconStandard: string;
+  /** Styles applied to the underlying native input component. */
+  nativeInput: string;
+}
+
+export type NativeSelectClassKey = keyof NativeSelectClasses;
+
+export function getNativeSelectUtilityClasses(slot: string): string {
+  return generateUtilityClass("MuiNativeSelect", slot);
+}
+
+const nativeSelectClasses: NativeSelectClasses = generateUtilityClasses(
+  "MuiNativeSelect",
+  [
+    "root",
+    "select",
+    "multiple",
+    "filled",
+    "outlined",
+    "standard",
+    "disabled",
+    "icon",
+    "iconOpen",
+    "iconFilled",
+    "iconOutlined",
+    "iconStandard",
+    "nativeInput",
+  ]
+);
+
+export default nativeSelectClasses;
diff --git a/packages/material/src/styles/components-types.ts b/packages/material/src/styles/components-types.ts
index 1e2546dec..18b5d5ca1 100644
--- a/packages/material/src/styles/components-types.ts
+++ b/packages/material/src/styles/components-types.ts
@@ -49,6 +49,7 @@ export { default as MuiListItemSecondaryAction } from "../ListItemSecondaryActio
 export { default as MuiListItemText } from "../ListItemText";
 export { default as MuiListSubheader } from "../ListSubheader";
 export { default as MuiModal } from "../Modal";
+export { default as MuiNativeSelect } from "../NativeSelect";
 export { default as MuiOutlinedInput } from "../OutlinedInput";
 export { default as MuiPaper } from "../Paper";
 export { default as MuiPopover } from "../Popover";