diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxDefault.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxDefault.stories.tsx
new file mode 100644
index 0000000000000..01fd9f5b6f808
--- /dev/null
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxDefault.stories.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Listbox, makeStyles, Option, shorthands } from '@fluentui/react-components';
+import type { ListboxProps } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  root: {
+    // Stack the label above the field with a gap
+    display: 'grid',
+    gridTemplateRows: 'repeat(1fr)',
+    justifyItems: 'start',
+    ...shorthands.gap('2px'),
+    maxWidth: '400px',
+  },
+});
+
+export const Default = (props: Partial<ListboxProps>) => {
+  const options = ['Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Snake'];
+
+  const styles = useStyles();
+  return (
+    <div className={styles.root}>
+      <Listbox {...props} aria-label="Select a pet">
+        {options.map(option => (
+          <Option key={option} disabled={option === 'Ferret'}>
+            {option}
+          </Option>
+        ))}
+      </Listbox>
+    </div>
+  );
+};
diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxDescription.md b/packages/react-components/react-combobox/stories/Listbox/ListboxDescription.md
new file mode 100644
index 0000000000000..db39dca2c9a77
--- /dev/null
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxDescription.md
@@ -0,0 +1 @@
+A listbox (`Listbox`) provides people a way to select an option from an inline list.
diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxFiltering.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxFiltering.stories.tsx
new file mode 100644
index 0000000000000..add6741bb6f5a
--- /dev/null
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxFiltering.stories.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { Button, Input, Listbox, makeStyles, mergeClasses, Option, shorthands } from '@fluentui/react-components';
+import type { ListboxProps } from '@fluentui/react-components';
+import { DismissRegular } from '@fluentui/react-icons';
+
+const useStyles = makeStyles({
+  root: {
+    // Stack the label above the field with a gap
+    display: 'grid',
+    gridTemplateRows: 'repeat(1fr)',
+    justifyItems: 'start',
+    ...shorthands.gap('2px'),
+    width: '200px',
+  },
+  input: {
+    width: '100%',
+    marginBottom: '8px',
+  },
+  listbox: {
+    width: '100%',
+  },
+});
+
+export const Filtering = (props: Partial<ListboxProps>) => {
+  const [filter, setFilter] = React.useState('');
+
+  const filteredOptions = React.useMemo(() => {
+    return ['Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Snake'].filter(
+      o => o.toLowerCase().includes(filter.toLowerCase()) || filter.toLowerCase().includes(o.toLowerCase()),
+    );
+  }, [filter]);
+
+  const styles = useStyles();
+  return (
+    <div className={styles.root}>
+      <Input
+        className={styles.input}
+        placeholder="Filter pets"
+        aria-label="Filter pets"
+        value={filter}
+        onChange={(_, data) => setFilter(data.value)}
+        contentAfter={
+          filter.length > 0 ? (
+            <Button
+              appearance="transparent"
+              icon={<DismissRegular />}
+              title="Clear filter"
+              onClick={() => setFilter('')}
+            />
+          ) : undefined
+        }
+      />
+      <Listbox {...props} aria-label="Select a pet" className={mergeClasses(styles.listbox, props.className)}>
+        {filteredOptions.map(option => (
+          <Option key={option} disabled={option === 'Ferret'}>
+            {option}
+          </Option>
+        ))}
+      </Listbox>
+    </div>
+  );
+};
diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInDialog.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInDialog.stories.tsx
new file mode 100644
index 0000000000000..06521e962b0e9
--- /dev/null
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInDialog.stories.tsx
@@ -0,0 +1,170 @@
+import * as React from 'react';
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  DialogActions,
+  DialogBody,
+  DialogContent,
+  DialogSurface,
+  DialogTitle,
+  DialogTrigger,
+  Input,
+  Listbox,
+  makeStyles,
+  MenuButton,
+  mergeClasses,
+  Option,
+  shorthands,
+  tokens,
+} from '@fluentui/react-components';
+import type { ListboxProps } from '@fluentui/react-components';
+import { DismissRegular } from '@fluentui/react-icons';
+
+const useStyles = makeStyles({
+  root: {
+    // Stack the label above the field with a gap
+    display: 'grid',
+    gridTemplateRows: 'repeat(1fr)',
+    justifyItems: 'start',
+    ...shorthands.gap('2px'),
+    maxWidth: '400px',
+  },
+  menuButton: {
+    justifyContent: 'space-between',
+  },
+  listboxWrapper: {
+    maxHeight: '200px',
+    ...shorthands.overflow('hidden', 'auto'),
+  },
+  inputWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    position: 'sticky',
+    top: '-4px',
+    backgroundColor: tokens.colorNeutralBackground1,
+    zIndex: 1,
+    ...shorthands.margin('-4px', '-4px', '0px'),
+    ...shorthands.padding('4px', '4px', '8px'),
+  },
+  input: {
+    width: '100%',
+  },
+  listbox: {
+    width: '100%',
+  },
+  option: {
+    scrollMarginBlockStart: '48px',
+  },
+});
+
+export const FilteringInDialog = (props: Partial<ListboxProps>) => {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const [isMultiselect, setIsMultiselect] = React.useState(props.multiselect);
+  const [selectedOptions, setSelectedOptions] = React.useState(props.selectedOptions ?? []);
+  const [pendingSelectedOptions, setPendingSelectedOptions] = React.useState(props.selectedOptions ?? []);
+
+  const [dialogOpen, setDialogOpen] = React.useState(false);
+  const [filter, setFilter] = React.useState('');
+
+  const filteredOptions = React.useMemo(() => {
+    return ['Bear', 'Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Monkey', 'Parrot', 'Snake', 'Zebra'].filter(
+      o => o.toLowerCase().includes(filter.toLowerCase()) || filter.toLowerCase().includes(o.toLowerCase()),
+    );
+  }, [filter]);
+
+  React.useEffect(() => {
+    setSelectedOptions(props.selectedOptions ?? []);
+  }, [props.selectedOptions]);
+
+  React.useEffect(() => {
+    setSelectedOptions(selection => (selection[0] ? [selection[0]] : []));
+  }, [isMultiselect]);
+
+  React.useEffect(() => {
+    if (dialogOpen) {
+      inputRef.current?.focus({ preventScroll: true });
+    }
+  }, [dialogOpen]);
+
+  const styles = useStyles();
+  return (
+    <div className={styles.root}>
+      <Checkbox
+        label="Multiselect"
+        checked={isMultiselect}
+        onChange={(_, data) => setIsMultiselect(data.checked !== false)}
+      />
+      <Dialog open={dialogOpen} onOpenChange={(_, data) => setDialogOpen(data.open)}>
+        <DialogTrigger disableButtonEnhancement>
+          <MenuButton
+            appearance="outline"
+            className={styles.menuButton}
+            onClick={() => setPendingSelectedOptions(selectedOptions)}
+          >
+            {selectedOptions.length > 0 ? selectedOptions.join(', ') : 'Select a pet'}
+          </MenuButton>
+        </DialogTrigger>
+        <DialogSurface>
+          <DialogBody>
+            <DialogTitle>Select a pet</DialogTitle>
+            <DialogContent className={styles.listboxWrapper}>
+              <div className={styles.inputWrapper}>
+                <Input
+                  ref={inputRef}
+                  className={styles.input}
+                  placeholder="Filter pets"
+                  aria-label="Filter pets"
+                  autoFocus={false}
+                  value={filter}
+                  onChange={(_, data) => setFilter(data.value)}
+                  contentAfter={
+                    filter.length > 0 ? (
+                      <Button
+                        appearance="transparent"
+                        icon={<DismissRegular />}
+                        title="Clear filter"
+                        onClick={() => setFilter('')}
+                      />
+                    ) : undefined
+                  }
+                />
+              </div>
+              <Listbox
+                {...props}
+                aria-label="Select a pet"
+                className={mergeClasses(styles.listbox, props.className)}
+                multiselect={isMultiselect}
+                selectedOptions={pendingSelectedOptions}
+                onOptionSelect={(e, data) => {
+                  setPendingSelectedOptions(data.selectedOptions);
+                }}
+              >
+                {filteredOptions.map(option => (
+                  <Option key={option} className={styles.option} disabled={option === 'Ferret'}>
+                    {option}
+                  </Option>
+                ))}
+              </Listbox>
+            </DialogContent>
+            <DialogActions>
+              <DialogTrigger>
+                <Button>Cancel</Button>
+              </DialogTrigger>
+              <Button
+                appearance="primary"
+                onClick={() => {
+                  setSelectedOptions(pendingSelectedOptions);
+                  setDialogOpen(false);
+                }}
+                disabled={!isMultiselect && pendingSelectedOptions.length === 0}
+              >
+                Done
+              </Button>
+            </DialogActions>
+          </DialogBody>
+        </DialogSurface>
+      </Dialog>
+    </div>
+  );
+};
diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInPopover.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInPopover.stories.tsx
new file mode 100644
index 0000000000000..ecfb7a05989a6
--- /dev/null
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxFilteringInPopover.stories.tsx
@@ -0,0 +1,167 @@
+import * as React from 'react';
+import {
+  Button,
+  Checkbox,
+  Input,
+  Listbox,
+  makeStyles,
+  MenuButton,
+  mergeClasses,
+  Option,
+  Popover,
+  PopoverSurface,
+  PopoverTrigger,
+  shorthands,
+  tokens,
+} from '@fluentui/react-components';
+import type { ListboxProps } from '@fluentui/react-components';
+import { DismissRegular } from '@fluentui/react-icons';
+
+const useStyles = makeStyles({
+  root: {
+    // Stack the label above the field with a gap
+    display: 'grid',
+    gridTemplateRows: 'repeat(1fr)',
+    justifyItems: 'start',
+    ...shorthands.gap('2px'),
+    maxWidth: '400px',
+  },
+  menuButton: {
+    justifyContent: 'space-between',
+  },
+  listboxWrapper: {
+    maxHeight: '200px',
+    marginBottom: '8px',
+    ...shorthands.overflow('hidden', 'auto'),
+  },
+  inputWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    position: 'sticky',
+    top: '-4px',
+    backgroundColor: tokens.colorNeutralBackground1,
+    zIndex: 1,
+    ...shorthands.margin('-4px', '-4px', '0px'),
+    ...shorthands.padding('4px', '4px', '8px'),
+  },
+  input: {
+    width: '100%',
+  },
+  listbox: {
+    width: '100%',
+  },
+  option: {
+    scrollMarginBlockStart: '48px',
+  },
+  doneButton: {
+    width: '100%',
+  },
+});
+
+export const FilteringInPopover = (props: Partial<ListboxProps>) => {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const [isMultiselect, setIsMultiselect] = React.useState(props.multiselect);
+  const [selectedOptions, setSelectedOptions] = React.useState(props.selectedOptions ?? []);
+  const [pendingSelectedOptions, setPendingSelectedOptions] = React.useState(props.selectedOptions ?? []);
+
+  const [popoverOpen, setPopoverOpen] = React.useState(false);
+  const [filter, setFilter] = React.useState('');
+
+  const filteredOptions = React.useMemo(() => {
+    return ['Bear', 'Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Monkey', 'Parrot', 'Snake', 'Zebra'].filter(
+      o => o.toLowerCase().includes(filter.toLowerCase()) || filter.toLowerCase().includes(o.toLowerCase()),
+    );
+  }, [filter]);
+
+  React.useEffect(() => {
+    setSelectedOptions(props.selectedOptions ?? []);
+  }, [props.selectedOptions]);
+
+  React.useEffect(() => {
+    setSelectedOptions(selection => (selection[0] ? [selection[0]] : []));
+  }, [isMultiselect]);
+
+  React.useEffect(() => {
+    if (popoverOpen) {
+      inputRef.current?.focus({ preventScroll: true });
+    }
+  }, [popoverOpen]);
+
+  const styles = useStyles();
+  return (
+    <div className={styles.root}>
+      <Checkbox
+        label="Multiselect"
+        checked={isMultiselect}
+        onChange={(_, data) => setIsMultiselect(data.checked !== false)}
+      />
+      <Popover
+        open={popoverOpen}
+        onOpenChange={(_, data) => setPopoverOpen(data.open)}
+        positioning={{ align: 'start' }}
+      >
+        <PopoverTrigger disableButtonEnhancement>
+          <MenuButton
+            appearance="outline"
+            className={styles.menuButton}
+            onClick={() => setPendingSelectedOptions(selectedOptions)}
+          >
+            {selectedOptions.length > 0 ? selectedOptions.join(', ') : 'Select a pet'}
+          </MenuButton>
+        </PopoverTrigger>
+        <PopoverSurface tabIndex={-1}>
+          <div className={styles.listboxWrapper}>
+            <div className={styles.inputWrapper}>
+              <Input
+                ref={inputRef}
+                className={styles.input}
+                placeholder="Filter pets"
+                aria-label="Filter pets"
+                autoFocus={false}
+                value={filter}
+                onChange={(_, data) => setFilter(data.value)}
+                contentAfter={
+                  filter.length > 0 ? (
+                    <Button
+                      appearance="transparent"
+                      icon={<DismissRegular />}
+                      title="Clear filter"
+                      onClick={() => setFilter('')}
+                    />
+                  ) : undefined
+                }
+              />
+            </div>
+            <Listbox
+              {...props}
+              aria-label="Select a pet"
+              className={mergeClasses(styles.listbox, props.className)}
+              multiselect={isMultiselect}
+              selectedOptions={pendingSelectedOptions}
+              onOptionSelect={(e, data) => {
+                setPendingSelectedOptions(data.selectedOptions);
+              }}
+            >
+              {filteredOptions.map(option => (
+                <Option key={option} className={styles.option} disabled={option === 'Ferret'}>
+                  {option}
+                </Option>
+              ))}
+            </Listbox>
+          </div>
+          <Button
+            appearance="primary"
+            className={styles.doneButton}
+            onClick={() => {
+              setSelectedOptions(pendingSelectedOptions);
+              setPopoverOpen(false);
+            }}
+            disabled={!isMultiselect && pendingSelectedOptions.length === 0}
+          >
+            Done
+          </Button>
+        </PopoverSurface>
+      </Popover>
+    </div>
+  );
+};
diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx
new file mode 100644
index 0000000000000..2ad5dd2000c54
--- /dev/null
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxInDialog.stories.tsx
@@ -0,0 +1,120 @@
+import * as React from 'react';
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  DialogActions,
+  DialogBody,
+  DialogContent,
+  DialogSurface,
+  DialogTitle,
+  DialogTrigger,
+  Listbox,
+  makeStyles,
+  MenuButton,
+  mergeClasses,
+  Option,
+  shorthands,
+} from '@fluentui/react-components';
+import type { ListboxProps } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  root: {
+    // Stack the label above the field with a gap
+    display: 'grid',
+    gridTemplateRows: 'repeat(1fr)',
+    justifyItems: 'start',
+    ...shorthands.gap('2px'),
+    maxWidth: '400px',
+  },
+  menuButton: {
+    justifyContent: 'space-between',
+  },
+  listboxWrapper: {
+    maxHeight: '200px',
+    ...shorthands.overflow('hidden', 'auto'),
+  },
+  input: {
+    width: '100%',
+  },
+  listbox: {
+    width: '100%',
+  },
+});
+
+export const InDialog = (props: Partial<ListboxProps>) => {
+  const [isMultiselect, setIsMultiselect] = React.useState(props.multiselect);
+  const [selectedOptions, setSelectedOptions] = React.useState(props.selectedOptions ?? []);
+  const [pendingSelectedOptions, setPendingSelectedOptions] = React.useState(props.selectedOptions ?? []);
+
+  const [dialogOpen, setDialogOpen] = React.useState(false);
+  const options = ['Bear', 'Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Monkey', 'Parrot', 'Snake', 'Zebra'];
+
+  React.useEffect(() => {
+    setSelectedOptions(props.selectedOptions ?? []);
+  }, [props.selectedOptions]);
+
+  React.useEffect(() => {
+    setSelectedOptions(selection => (selection[0] ? [selection[0]] : []));
+  }, [isMultiselect]);
+
+  const styles = useStyles();
+  return (
+    <div className={styles.root}>
+      <Checkbox
+        label="Multiselect"
+        checked={isMultiselect}
+        onChange={(_, data) => setIsMultiselect(data.checked !== false)}
+      />
+      <Dialog open={dialogOpen} onOpenChange={(_, data) => setDialogOpen(data.open)}>
+        <DialogTrigger disableButtonEnhancement>
+          <MenuButton
+            appearance="outline"
+            className={styles.menuButton}
+            onClick={() => setPendingSelectedOptions(selectedOptions)}
+          >
+            {selectedOptions.length > 0 ? selectedOptions.join(', ') : 'Select a pet'}
+          </MenuButton>
+        </DialogTrigger>
+        <DialogSurface>
+          <DialogBody>
+            <DialogTitle>Select a pet</DialogTitle>
+            <DialogContent className={styles.listboxWrapper}>
+              <Listbox
+                {...props}
+                aria-label="Select a pet"
+                className={mergeClasses(styles.listbox, props.className)}
+                multiselect={isMultiselect}
+                selectedOptions={pendingSelectedOptions}
+                onOptionSelect={(e, data) => {
+                  setPendingSelectedOptions(data.selectedOptions);
+                }}
+              >
+                {options.map(option => (
+                  <Option key={option} disabled={option === 'Ferret'}>
+                    {option}
+                  </Option>
+                ))}
+              </Listbox>
+            </DialogContent>
+            <DialogActions>
+              <DialogTrigger>
+                <Button>Cancel</Button>
+              </DialogTrigger>
+              <Button
+                appearance="primary"
+                onClick={() => {
+                  setSelectedOptions(pendingSelectedOptions);
+                  setDialogOpen(false);
+                }}
+                disabled={!isMultiselect && pendingSelectedOptions.length === 0}
+              >
+                Done
+              </Button>
+            </DialogActions>
+          </DialogBody>
+        </DialogSurface>
+      </Dialog>
+    </div>
+  );
+};
diff --git a/packages/react-components/react-combobox/stories/Listbox/ListboxMultiselect.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/ListboxMultiselect.stories.tsx
new file mode 100644
index 0000000000000..baa67da6bbcb2
--- /dev/null
+++ b/packages/react-components/react-combobox/stories/Listbox/ListboxMultiselect.stories.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Listbox, makeStyles, Option, shorthands } from '@fluentui/react-components';
+import type { ListboxProps } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  root: {
+    // Stack the label above the field with a gap
+    display: 'grid',
+    gridTemplateRows: 'repeat(1fr)',
+    justifyItems: 'start',
+    ...shorthands.gap('2px'),
+    maxWidth: '400px',
+  },
+});
+
+export const Multiselect = (props: Partial<ListboxProps>) => {
+  const options = ['Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Snake'];
+
+  const styles = useStyles();
+  return (
+    <div className={styles.root}>
+      <Listbox {...props} multiselect aria-label="Select pets">
+        {options.map(option => (
+          <Option key={option} disabled={option === 'Ferret'}>
+            {option}
+          </Option>
+        ))}
+      </Listbox>
+    </div>
+  );
+};
diff --git a/packages/react-components/react-combobox/stories/Listbox/index.stories.tsx b/packages/react-components/react-combobox/stories/Listbox/index.stories.tsx
new file mode 100644
index 0000000000000..2a12f16d05465
--- /dev/null
+++ b/packages/react-components/react-combobox/stories/Listbox/index.stories.tsx
@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/react';
+import { Listbox, Option } from '@fluentui/react-components';
+
+import descriptionMd from './ListboxDescription.md';
+
+export { Default } from './ListboxDefault.stories';
+export { Multiselect } from './ListboxMultiselect.stories';
+export { Filtering } from './ListboxFiltering.stories';
+export { InDialog } from './ListboxInDialog.stories';
+export { FilteringInDialog } from './ListboxFilteringInDialog.stories';
+export { FilteringInPopover } from './ListboxFilteringInPopover.stories';
+
+export default {
+  title: 'Components/Listbox',
+  component: Listbox,
+  subcomponents: {
+    Option,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: [descriptionMd].join('\n'),
+      },
+    },
+  },
+} as Meta;