[ui][typeahead] add required field

apps/storybook/stories/typeahead.stories.tsx

@@ -20,6 +20,9 @@ export default {
     placeholder: {
       control: 'text',
     },
+    required: {
+      control: 'boolean',
+    },
   },
   component: Typeahead,
   parameters: {
@@ -80,3 +83,39 @@ Basic.args = {
   isLabelHidden: false,
   label: 'Author',
 };
+
+export function Required() {
+  const people = [
+    { id: '1', label: 'Wade Cooper', value: '1' },
+    { id: '2', label: 'Arlene Mccoy', value: '2' },
+    { id: '3', label: 'Devon Webb', value: '3' },
+    { id: '4', label: 'Tom Cook', value: '4' },
+    { id: '5', label: 'Tanya Fox', value: '5' },
+    { id: '6', label: 'Hellen Schmidt', value: '6' },
+  ];
+  const [selectedEntry, setSelectedEntry] = useState<TypeaheadOption>(
+    people[0],
+  );
+  const [query, setQuery] = useState('');
+
+  const filteredPeople =
+    query === ''
+      ? people
+      : people.filter((person) =>
+          person.label
+            .toLowerCase()
+            .replace(/\s+/g, '')
+            .includes(query.toLowerCase().replace(/\s+/g, '')),
+        );
+
+  return (
+    <Typeahead
+      label="Author"
+      options={filteredPeople}
+      required={true}
+      value={selectedEntry}
+      onQueryChange={setQuery}
+      onSelect={setSelectedEntry}
+    />
+  );
+}