TextInput: Add autoComplete to Storybook/docs (#5051)

* Add `autoComplete` to docs, story * add a comma
primer · Sep 30, 2024 · 1612131 · 1612131
1 parent d1d911a
commit 1612131
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/packages/react/src/TextInput/TextInput.docs.json b/packages/react/src/TextInput/TextInput.docs.json
@@ -10,7 +10,13 @@
       "name": "aria-label",
       "type": "string",
       "defaultValue": "",
-      "description": "Allows input to be accessible."
+      "description": "Gives the input an accessible name."
+    },
+    {
+      "name": "autoComplete",
+      "type": "string",
+      "defaultValue": "",
+      "description": "Allows input to autofill based on value given."
     },
     {
       "name": "block",

diff --git a/packages/react/src/TextInput/TextInput.features.stories.tsx b/packages/react/src/TextInput/TextInput.features.stories.tsx
@@ -294,3 +294,16 @@ WithLoadingIndicator.parameters = {
     exclude: [...textInputExcludedControlKeys, 'loaderPosition', ...Object.keys(formControlArgTypes), 'children'],
   },
 }
+
+export const WithAutocompleteAttribute = () => (
+  <Box as="form">
+    <FormControl>
+      <FormControl.Label>First name</FormControl.Label>
+      <TextInput autoComplete="given-name" />
+    </FormControl>
+    <FormControl>
+      <FormControl.Label>Last name</FormControl.Label>
+      <TextInput autoComplete="family-name" />
+    </FormControl>
+  </Box>
+)