diff --git a/.changeset/cool-parrots-double.md b/.changeset/cool-parrots-double.md
new file mode 100644
index 00000000000..8ffb3c506db
--- /dev/null
+++ b/.changeset/cool-parrots-double.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Adds a component for a native select input
diff --git a/docs/content/InputField.mdx b/docs/content/InputField.mdx
index 741e9e1671b..2f6b71adbde 100644
--- a/docs/content/InputField.mdx
+++ b/docs/content/InputField.mdx
@@ -7,9 +7,7 @@ source: https://github.com/primer/react/blob/main/src/InputField/InputField.tsx
storybook: '/react/storybook?path=/story/forms-inputfield--text-input-field'
---
-import {InputField, TextInputWithTokens} from '@primer/react'
-import {PropsTable} from '../src/props-table'
-import {ComponentChecklist} from '../src/component-checklist'
+import {InputField, TextInputWithTokens, Autocomplete, Select} from '@primer/react'
## Examples
@@ -40,7 +38,7 @@ import {ComponentChecklist} from '../src/component-checklist'
```
-### Using a TextInputWithTokens input
+### Using different input components
```javascript live noinline
const TextInputWithTokensExample = () => {
@@ -54,10 +52,49 @@ const TextInputWithTokensExample = () => {
}
return (
-
- Name
-
-
+ * + *': {
+ marginTop: 4
+ }
+ }}
+ >
+
+ TextInputWithTokens
+
+
+
+ Autocomplete
+
+
+
+
+
+
+
+
+ Select
+
+
+
)
}
@@ -137,35 +174,35 @@ render(ValidationExample)
The container that handles the layout and passes the relevant IDs and ARIA attributes it's children.
-
-
-
-
-
-
+
### InputField.Label
@@ -173,7 +210,7 @@ The container that handles the layout and passes the relevant IDs and ARIA attri
A `InputField.Label` must be passed for the field to be accessible to assistive technology, but it may be visually hidden.
-
-
-
-
+
+ Preferred Primer component interface
+
+
+
+```
+
+### With grouped options
+
+```jsx live
+<>
+
+ Preferred Primer component interface
+
+
+
+```
+
+### With a placeholder
+
+```jsx live
+<>
+
+ Preferred Primer component interface
+
+
+
+```
+
+## Props
+
+### Select
+
+
+ Creates a full width input element}
+ />
+
+
+
+ MDN
+ }
+ />
+
+
+
+### Select.OptGroup
+
+The `Select.OptGroup` component accepts the same props as a native HTML [`