export select description

Author: thejackshelton

apps/website/src/routes/docs/headless/select/examples/description.tsx

@@ -0,0 +1,33 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import { Select } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStyles$(styles);
+  const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
+
+  return (
+    <Select.Root class="select">
+      <Select.Label>Logged in users</Select.Label>
+      <Select.Trigger class="select-trigger">
+        <Select.DisplayValue placeholder="Select an option" />
+      </Select.Trigger>
+      <Select.Description>Select a user to see their profile</Select.Description>
+      <Select.Popover class="select-popover">
+        <Select.Listbox class="select-listbox">
+          {users.map((user) => (
+            <Select.Item class="select-item" key={user}>
+              <Select.ItemLabel>{user}</Select.ItemLabel>
+              <Select.ItemIndicator>
+                <LuCheck />
+              </Select.ItemIndicator>
+            </Select.Item>
+          ))}
+        </Select.Listbox>
+      </Select.Popover>
+    </Select.Root>
+  );
+});
+
+// internal
+import styles from '../snippets/select.css?inline';
+import { LuCheck } from '@qwikest/icons/lucide';

apps/website/src/routes/docs/headless/select/index.mdx

@@ -177,6 +177,12 @@ The native select element is created when a form name has been given to `<Select
 
 Above is an example of submitting a multi-select form.
 
+### Descriptions
+
+Provide more information to assistive technologies by adding a description to the select.
+
+<Showcase name="description" />
+
 ## Component state
 
 We can select an initial uncontrolled value by passing the `value` prop to the `<Select.Root />` component.

packages/kit-headless/src/components/select/index.ts

@@ -9,4 +9,5 @@ export { HSelectGroupLabel as GroupLabel } from './select-group-label';
 export { HSelectItem as Item } from './select-item';
 export { HSelectItemLabel as ItemLabel } from './select-item-label';
 export { HSelectItemIndicator as ItemIndicator } from './select-item-indicator';
+export { HSelectDescription as Description } from './select-description';
 export { HHiddenNativeSelect as HiddenNativeSelect } from './hidden-select';